JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg></svg>

CSS

svg {
    width: 100%;
    height: 200px;
    outline: 1px solid #e1e1e1;
}

JavaScript

var snap = Snap("svg");

var rectangle1 = snap.rect(10, 10, 100, 100).addClass('block');
rectangle1.attr({
    fill: "#67c946"
});

var rectangle2 = snap.rect(115, 10, 100, 100).addClass('block');
rectangle2.attr({
    fill: "#67c946"
});

var rectangle3 = snap.rect(220, 10, 100, 100).addClass('block');
rectangle3.attr({
    fill: "#67c946"
});

rectangle1.animate({
    y: 90,
    height: 20
}, 1e3);

rectangle2.animate({
    y: 50,
    height: 60
}, 1e3);

rectangle3.animate({
    y: 30,
    height: 80
}, 1e3);