JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg class="a" width="600px" height="600px"></svg>

JavaScript

//http://svg.dabbles.info/snaptut-animate-object-path-repeat

//https://css-tricks.com/svg-line-animation-works/

//http://svg.dabbles.info/snaptut-animate-object-path-repeat
//https://codepen.io/JMChristensen/pen/tFdCg?editors=1010

var s=Snap(".a");

var circle = s.circle(150, 150, 100);

circle.attr({
    fill: "red",
    stroke: "#bada55",
    strokeWidth: 5
}).addClass("Circle");


var rect =  s.rect(10,10,100,100);
rect.attr({
    fill: "red",
    stroke: "#bada55",
    strokeWidth: 5
});
/* rect.animate({x: 50, y:50}, 1000); */

circle.animate(
{transform: 'r90,256,256'}, 1000,
  function(){ 
    circle.attr({ fill: 'orange',stroke:'orange'}); 
  }

);


/* circle.animate({x: 50, y:50}, 1000); */