JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<div class="wrapper"> 
  <div class="octoSynth">
    <svg class="octopus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="50 -150 740 652" version="1.1">
       <defs>
          <linearGradient id="octoSkin" x1="5%" x2="5%" y1="0%" y2="15%">
          <stop stop-color="#00003b" offset="15%"/>
          <stop stop-color="#66003b" offset="50%"/>
          <stop stop-color="#99003b" offset="100%"/>
        </linearGradient>
      </defs>
    <path 
          d="m 489.82416,438.28504 c 4.8748,-29.06529 64.5257,-21.06565 50.26753,-55.02943 -21.00568,-22.8008 -58.12753,-12.27518 -81.46837,-32.77006 -17.37772,-8.60053 -29.84777,-32.00485 -40.09306,-41.81338 -17.18528,34.31763 -53.01296,56.64735 -90.89654,59.9979 -30.82888,-1.60971 -43.42185,40.5657 -7.69133,44.82202 14.06969,-1.01426 42.37632,36.67962 19.76384,13.8437 -20.09899,-10.71704 -61.37597,-9.84687 -55.78516,-42.82076 7.23931,-33.45095 46.5359,-34.11956 70.46967,-49.36768 11.64494,-4.80053 36.46946,-39.93507 12.87891,-16.47418 -33.89242,28.62971 -83.85214,31.34967 -122.38616,10.54303 -25.0067,-12.25456 -64.48978,-27.86934 -83.22597,2.20581 -17.52659,33.35387 44.38067,53.72634 48.61793,15.56246 -0.93534,40.78244 -66.23126,28.48922 -61.13011,-8.86055 1.88215,-33.97784 42.96973,-47.03736 71.53873,-39.06534 33.18747,7.29678 69.01197,26.92264 102.1789,8.32464 16.53462,-4.7214 53.4875,-48.59164 15.93352,-29.16981 -47.99966,10.67881 -105.72393,10.82022 -144.11551,-24.34676 -32.11643,-29.79068 -29.75756,-76.32702 -42.58542,-114.85757 -7.8848,-22.95465 -32.5907,-41.509451 -57.399695,-35.50369 33.896895,-12.088844 65.054925,19.30083 72.964405,50.25146 10.53896,35.08661 19.80765,78.80776 58.26186,93.50874 32.07334,11.58077 68.4552,7.40187 100.0442,-3.67349 C 256.38882,228.2553 196.11888,173.07877 179.43049,102.93359 168.29071,59.135794 169.36683,1.8771646 210.94162,-25.750991 c 26.97131,-19.484596 73.06637,-5.753075 77.21778,29.6637276 6.63124,27.9913514 -28.34676,54.3295404...

CSS

html, body {
  background: linear-gradient(to top, #00003b 70%, #33003b 97%, #66003b);
  color: #fff;
  min-height: 100%;
  min-width: 100%;
  overflow-x: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 50%;
  padding-top: 50%;
  z-index: 1;
}

.octoSynth {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 580px;
  height: 580px;
  margin: -290px 0 0 -290px;
}

.octopus path {
  fill: url(#octoSkin);
  stroke: rgba(19,255,237,1);
}

@media (min-width: 740px) {
  .octopus path {
    stroke-width: .4px;
  }
}

JavaScript

// Center content
function wrapAutoElAdjust(el) {
  var timeout = null;
  function resize() {
    if (timeout) clearTimeout(timeout);
    anime.set(el, {scale: 1});
    var parentEl = el.parentNode;
    var elOffsetWidth = el.offsetWidth;
    var parentOffsetWidth = parentEl.offsetWidth;
    var elOffsetHeight = el.offsetHeight;
    var parentOffsetHeight = parentEl.offsetHeight;
    var ratio = parentOffsetWidth / elOffsetWidth;  //svg viewBox ? ? 740 582 8 for Octopus
    timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
  }
  resize();
  window.addEventListener('resize', resize);
}
// End Center Content Code

// OctoAni Code Begin
(function() {
  var octoEl = document.querySelector('.octoSynth');
  var octoPathEls = octoEl.querySelectorAll('.octopus path');
  var pLength = octoPathEls.length;
  var octoLife = [];

  wrapAutoElAdjust(octoEl);
 

  var floatAni = anime({
    begin: function() {
      for (var i = 0; i < pLength; i++) {
        octoLife.push(anime({
          targets: octoPathEls[i],
          stroke: {value:'rgba(0,171,255,.5)', duration: 1000},
          translateY: 10,
          easing: 'linear',
          autoplay: false,
        }));
      }
    },
    update: function(ins) {
      octoLife.forEach(function(animation, i) {
        var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2;
        animation.seek(animation.duration * percent);
      });
    },
    duration: Infinity,
    autoplay: false
  });

  var octoSmoosh = anime({
      targets: '#octoSkin',
      x1: '25%',
      x2: '25%',
      y1: '0%',
      y2: '75%',
      duration: 5000,
      easing: 'easeOutQuart',
      autoplay: false
    }, 0);

  function init() {
    octoSmoosh.play();
    floatAni.play();
  }
  
  init();

}());
// OctoAni Code End