JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<script src="https://cdn.rawgit.com/loredanacirstea/svg.connectable.js/master/src/svg.connectable.min.js"></script>
<div class="lines"></div>

SCSS

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

JavaScript

var svg = new SVG(document.querySelector(".lines")).size("100%", "100%");
var links = svg.group();
var markers = svg.group();
var nodes = svg.group();

svg.viewbox(0, 0, 1920, 720);

var circle1 = nodes.group().translate(45.5, 267.5);
var circle2 = nodes.group().translate(126.88, 523);
var circle3 = nodes.group().translate(260.21, 426);
var circle4 = nodes.group().translate(614.5, 273.5);
var circle5 = nodes.group().translate(358.92, 182.42);
var circle6 = nodes.group().translate(833.5, 224);
var circle7 = nodes.group().translate(986.5, 133.5);
var circle8 = nodes.group().translate(812, 483.5);
var circle9 = nodes.group().translate(1028.5, 304.75);
var circle10 = nodes.group().translate(1313.25, 424.75);
var circle11 = nodes.group().translate(1415.25, 203.25);
var circle12 = nodes.group().translate(1606.75, 268.25);
var circle13 = nodes.group().translate(1653.33, 561.57);
var circle14 = nodes.group().translate(-200, 400);
var circle15 = nodes.group().translate(1920, 500);

circle1.circle(18).fill("red");
circle2.circle(18).fill("red");
circle3.circle(18).fill("red");
circle4.circle(18).fill("red");
circle5.circle(18).fill("red");
circle6.circle(18).fill("red");
circle7.circle(18).fill("red");
circle8.circle(18).fill("red");
circle9.circle(18).fill("red");
circle10.circle(18).fill("red");
circle11.circle(18).fill("red");
circle12.circle(18).fill("red");
circle13.circle(18).fill("red");
circle14.circle(18).fill("red");
circle15.circle(18).fill("red");

var line1 = circle1.connectable({
	container: links,
    markers: markers,
    targetAttach: 'center',
    color: 'blue'
}, circle2);

var line2 = circle1.connectable({
	container: links,
    markers: markers,
    targetAttach: 'center',
    color: 'blue'
}, circle14);

var line3 = circle13.connectable({
	container: links,
    markers: markers,
    targetAttach: 'center',
    color: 'blue'
}, circle15);

var line4 = circle12.connectable({
	container: links,
    markers: markers,
    targetAttach: 'center',
    color:...