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 id="svgout" width="100%" height="600px">
    
</svg>

JavaScript

// First lets create our drawing surface out of existing SVG element
// If you want to create new surface just provide dimensions
// like s = Snap(800, 600);
var s = Snap("#svgout");
// Lets create big circle in the middle:
var bigCircle = s.circle(150, 150, 100);
// By default its black, lets change its attributes
bigCircle.attr({
    fill: "none",
    stroke: "#bada55",
    strokeWidth: 5
}).addClass("Circle");


var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
        fill: "green",
        stroke: "#bada55",
        strokeWidth: 4
    }).pattern(0, 0, 10, 10).addClass("pattern");
    
bigCircle.attr({
    fill: p
});

var c1 = s.circle(),
    c2 = s.rect(),
    g = s.g(c2, bigCircle);
    g.addClass("aaa");
    
    
            var pivots = [
                [44, 147],
                [92, 126]
            ];
            
            var a = Snap.select("#svgout");
            var b  = a.select(".aaa");
    b.addClass("kkkkkkkkkkkk");        
            
b.animate({ 
   transform:"translate(100px)"
 }, 700, mina.elastic);