JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<svg id="test-svg" viewBox="0 0 20 10">
    <polyline id="line-1" points="10,0 0,10"
              style="fill:none;stroke:#000;stroke-width:0.5" />
    <polyline id="line-2" points="20,10 10,0"
              style="fill:none;stroke:#000;stroke-width:0.5" />
</svg>

CSS

body, html {
  margin: 0;
  padding: 10px;
}

svg {
  width: 100%;
  outline: 1px solid #000;
  cursor: pointer;
}

JavaScript

// successful SVG animation
var line1, line2, bolToDown = true;

window.addEventListener('load', function () {
	line1 = document.getElementById('line-1');
  line2 = document.getElementById('line-2');
  
	window.requestAnimFrame = (
    window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     || 
    function(callback){
      window.setTimeout(callback, 1000 / 30);
    }
  );
  
  document.getElementById('test-svg').addEventListener('click', function () {
  	if (bolToDown) {
			animateToDown();
    } else {
    	animateToUp();
    }
  	bolToDown = !bolToDown;
  });
});

Math.easeOutQuad = function (current_time, start_value, end_change, end_time) {
    'use strict';
    // Quadratic equation (produced by Robert Penner (www.robertpenner.com))
    current_time /= end_time;
    return -end_change * current_time * (current_time - 2) + start_value;
};

  //requestAnimFrame(repeatOften);
function animateToDown() {
	var i, len, step, steps;
	var line1Points = line1.getAttribute('points').split(' ');
	var line2Points = line2.getAttribute('points').split(' ');
  
  for (i = 0, len = line1Points.length; i < len; i += 1) {
  	line1Points[i] = line1Points[i].split(',');
    line1Points[i][0] = parseInt(line1Points[i][0], 10);
    line1Points[i][1] = parseInt(line1Points[i][1], 10);
    line1Points[i][3] = line1Points[i][0];
  }
  for (i = 0, len = line2Points.length; i < len; i += 1) {
  	line2Points[i] = line2Points[i].split(',');
    line2Points[i][0] = parseInt(line2Points[i][0], 10);
    line2Points[i][1] = parseInt(line2Points[i][1], 10);
    line2Points[i][3] = line2Points[i][0];
  }
  
  step = 0;
  steps = 9;
  var animateWorker = function () {
  	var strPoints = '', i, len;
    
    for (i = 0, len = line1Points.length; i < len; i += 1) {
    	line1Points[i][0] = Math.easeOutQuad(step, line1Points[i][3], 10, steps);
   ...