JSFiddle - React, Tailwind, and code Playground

by Rob Lang

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

JavaScript

var s = Snap("#svg");

var block = s.rect(100, 100, 100, 100, 20, 20);
block.attr({
    fill: "rgb(236, 240, 241)",
    stroke: "#1f2c39",
    strokeWidth: 3
});

block.drag(

function (dx, dy, x, y, e) {
    // Do your custom work here
    this.attr({
        transform: origTransform + (origTransform ? "T" : "t") + [dx, dy]
    });
},

function (x, y, e) {
    origTransform = this.transform().local;
});