JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<div id="lines">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><style>.a{fill:none;stroke:#f0f;stroke-linejoin:round;stroke-width:3px;}.b{fill:red;}</style></defs><polyline class="a" points="-278.12 460.16 45.5 267.5 358.67 181.33 614.5 273.5 833.5 224 986.5 133.5 1415.25 203.25 1606.75 268.25 2286.22 788.05"/><polyline class="a" points="260.21 426 45.5 267.5 126.88 523 260.21 426 614.5 273.5 812 483.5 1028.5 304.75 1415.25 203.25 833.5 224 812 483.5"/><polyline class="a" points="833.5 224 1028.5 304.75 1313.25 424.75 812 483.5"/><polyline class="a" points="1415.25 203.25 1313.25 424.75 1606.75 268.25 1653.34 561.57 1313.25 424.75"/><line class="a" x1="1653.33" y1="561.57" x2="2286.22" y2="444.19"/><circle class="b" cx="45.5" cy="267.5" r="6.5"/><circle class="b" cx="126.88" cy="523" r="6.5"/><circle class="b" cx="260.21" cy="426" r="6.5"/><circle class="b" cx="614.5" cy="273.5" r="6.5"/><circle class="b" cx="358.92" cy="182.42" r="6.5"/><circle class="b" cx="833.5" cy="224" r="6.5"/><circle class="b" cx="986.5" cy="133.5" r="6.5"/><circle class="b" cx="812" cy="483.5" r="6.5"/><circle class="b" cx="1028.5" cy="304.75" r="6.5"/><circle class="b" cx="1313.25" cy="424.75" r="6.5"/><circle class="b" cx="1415.25" cy="203.25" r="6.5"/><circle class="b" cx="1606.75" cy="268.25" r="6.5"/><circle class="b" cx="1653.33" cy="561.57" r="6.5"/></svg>
</div>

SCSS

#lines {
  position: relative;
  background: gray;
  width: 100%;
  height: 0;
  padding-top: 37.50%;
  
  svg {
    position: absolute;
    top: 0;
    left: 0;
  }
}

JavaScript

var snap = Snap('#lines');