JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <svg width="300" height="150">
        <path id="path3"></path>
    </svg>

JavaScript

var areaGenerator2 = d3.area()
          .curve(d3.curveCardinal)
          .x(function (d) {
              return d.x;
          })
          .y0(function (d) {
              return d.low;
          })
          .y1(function (d) {
              return d.high;
          });

        var points3 = [
          { x: 0, low: 80, high: 80 },
          { x: 35, low: 105, high: 95 },
          { x: 75, low: 115, high: 100 },
          { x: 115, low: 105, high: 95 },
          { x: 150, low: 80, high: 80 }
        ];
        var center = 90;
        var pathData3 = areaGenerator2(points3);
        function smileTween() {
            return function (t) {
                if (smilie.attr("data-reverse") == "true") t = 1 - t;
                var newpoints = [];
                for (var i = 0; i < points3.length; i++) {
                    var cpoints = points3[i];
                    newpoints[i] = {};
                    var deltalow = cpoints.low - center;
                    var h = cpoints.low - cpoints.high;
                    var deltaendlow = -deltalow + h;
                    var clower = deltalow + (deltaendlow - deltalow) * t + center;
                    newpoints[i].x = cpoints.x;
                    newpoints[i].low = clower;
                    newpoints[i].high = clower - h;
                };
                console.log(t, newpoints)
                return areaGenerator2(newpoints);
            }
        }
        function repeat() {
            if (smilie.attr("data-reverse") == 'false')
                smilie.attr("data-reverse", "true");
            else
                smilie.attr("data-reverse", "false");
            smilie
                .transition()
                .duration(5000)
                .attrTween("d", smileTween)
                .on("end", repeat);
        }
        var smilie = d3.select('#path3')
            .attr('d', pathData3)
            .attr('fill', 'red')
            .attr('stroke', 'black')
            .attr('data-reverse',...