JSFiddle - React, Tailwind, and code Playground

by Andrejs Gubars

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<div id="one" style="text-align:center; height: 200px">
  <svg id="svg-one">
  </svg>
</div>
<div id="two" style="right: 0; min-width: 15px;">
  <svg id="svg-two" style="margin-left: 50%;">
  </svg>
</div>

CSS

div {
  poistion: relative;
}

JavaScript

$(document).ready(function() {
  var $width = $("div#one").width();
  var $height = $(window).height();
	var y1 = 200;
  var x1 = 200;
  var s = Snap("#svg-one");
  var s1 = Snap("#svg-two");
	//$("div#one").attr({style: "height=200px;"});
  //to center svg divide the divs width by the y coordinate
  s.attr({
    height: $height,
    width: $width / y1
  });
  s1.attr({
    height: $height / x1+15,
    width: $width
  });
  
  var hr_line = s.polyline(0, y1, 0, 0);
  var vr_line = s1.polyline(200, 0, 0, 0);
 
  hr_line.attr({
    fill: "#333333",
    stroke: "#333",
    strokeWidth: 15,
    strokeDasharray: "5",
    strokeDashoffset: 15
  });

  setTimeout(function(){
  vr_line.attr({
    fill: "#333333",
    stroke: "#333",
    strokeWidth: 10,
    strokeDasharray: "5",
    strokeDashoffset: 20
  });
   Snap.animate(0, y1, function(value) {
    s1.attr({
      'width': + value
    });
  }, 1000);
  },1000);
  
  Snap.animate(0, y1, function(value) {
    s.attr({
      'height': + value
    });
  }, 1000);
  
})