JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" id="intro">
  <path id="wave" d="" fill="#000"/>
</svg>


M 566.628 245.794C 539.89 342.245 464.424 271.307 379.058 271.307C 282.287 271.307 233.466 367.719 152.71 315.488C 99.2776 280.929 121.618 219.064 0 219.064L 0 81.5165C 44.1568 28.133 130.988 0 160.451 0C 195.795 0 223.817 21.0117 234.85 52.1632C 247.229 87.1169 229.073 138.901 296.664 155.114C 344.235 166.525 362.219 146.694 398.646 127.253C 463.938 92.4061 596.719 137.24 566.628 245.794Z

SCSS

html, body {
  height: 100%;
}

JavaScript

var container = document.body;
var width = container.offsetWidth;
var height = container.offsetHeight;
var wave = document.getElementById('wave');

var waveWidth = container.offsetWidth;  // Wave SVG width (usually container width)
var waveHeight = 400;                   // Position from the top of container
var waveDelta = 20;                     // Wave amplitude
var speed = 1.1;                        // Wave animation speed
var wavePoints = 6;                     // How many point will be used to compute our wave

var points = [];

function calculateWavePoints(factor) {
  var pointss = ['566.628 245.794', '379.058 271.307', '152.710 315.488', '0.000 219.064', '0.000 81.516', '160.451 0.000', '234.850 52.163','296.664 155.114', '398.646 127.253', '566.628 245.794'];
  var points = []
  for (var i = 0; i <= wavePoints; i++) {
    /* var x = i/wavePoints * waveWidth;
    var sinSeed = (factor + (i + i % wavePoints)) * speed * 100;
    var sinHeight = Math.sin(sinSeed / 100) * waveDelta;
    var yPos = Math.sin(sinSeed / 100) * sinHeight  + waveHeight; */
    points.push({x: points[i], y: yPos});
  }

  return points;
}

function buildPath(points) {
  var SVGString = 'M ' + points;

  var cp0 = {
    x: (points[1].x - points[0].x) / 2,
    y: (points[1].y - points[0].y) + points[0].y + (points[1].y - points[0].y)
  };

  SVGString += ' C ' + cp0.x + ' ' + cp0.y + ' ' + cp0.x + ' ' + cp0.y + ' ' + points[1].x + ' ' + points[1].y;

  var prevCp = cp0;
  var inverted = -1;

  for (var i = 1; i < points.length-1; i++) {
    var cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
    var cp1 = {
      x: (points[i].x - prevCp.x) + points[i].x,
      y: (points[i].y - prevCp.y) + points[i].y
    };

    SVGString += ' C ' + cp1.x + ' ' + cp1.y + ' ' + cp1.x + ' ' + cp1.y + ' ' + points[i+1].x + ' ' + points[i+1].y;
    prevCp = cp1;
    inverted = -inverted;
  }

  SVGString += ' L ' + width + ' ' + height;
  SVGString += ' L 0 ' + height + ' Z';
  return...