JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="s" viewBox="0 0 100 100"></svg>

CSS

html {
  background: #222;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
}

svg {
  height: 100%;
  width: 100%;
}

JavaScript

//disunite
//diverger
var style = {
    fill: "#bada55",
    stroke: "#001",
    strokeWidth: 8,
    strokeLinecap: "round"
};


var s = Snap("#s"),
    top = s.path("M0 15, l100 0").attr(style),
    mid = s.path("M0 50, l100 0").attr(style),
    bot = s.path("M0 85, l100 0").attr(style);    

//var square = s.rect(10,10,80,80).attr({
//  fill: 'rgba(255,255,255,0.2)'
//})
mid.hover(ani,ani,this,this);
function ani(){
	mid.animate({ transform: 'r360,150,150' }, 1000, mina.bounce);
}