JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

CSS

body {
        background: #333;
        margin: 0;
        padding: 0;
    }
	svg {
		background: #000;
	}

JavaScript

Raphael(0, 0, 800, 600, function () {
		var G = "#fff";
		document.onclick = function (e) {
			eve("click", e);
		};
		var dotsx = [],
			dotsy = [],
			r = this,
			path = "",
			p = r.path().attr({
				stroke: G,
				"stroke-width": 3,
				"stroke-linecap": "round"
			}),
			cs = [
				r.circle(-1e3, -1e3, 8),
				r.circle(-1e3, -1e3, 8),
				r.circle(-1e3, -1e3, 8),
				r.circle(-1e3, -1e3, 8),
				r.circle(-1e3, -1e3, 8),
				r.circle(-1e3, -1e3, 8),
				r.circle(-1e3, -1e3, 8)
			];
		r.text(400, 30, "Click to create a polyline…").attr({
			font: "20px Helvetica",
			fill: "#fff"
		});
		eve.on("click", function f() {
			var x = this.pageX,
				y = this.pageY;
			r.circle(x, y, 1).attr({
				stroke: G,
				"stroke-width": 4
			}).animate({r: 100, opacity: 0}, 500, function () {
				this.remove();
			});
			cs[dotsx.length].attr({
				cx: x,
				cy: y,
				stroke: G,
				"stroke-width": 10,
				fill: "#000"
			});
			if (!dotsx.length) {
				path = "M" + [x, y];
			} else {
				path += " " + [x, y];
			}
			dotsx.push(x);
			dotsy.push(y);
			p.attr({path: path});
			if (dotsx.length > 6) {
				eve.off("click", f);
				path = path.replace(" ", "R");
				p.animate({
					"stroke-width": 15,
					path: path
				}, 1000, "elastic");
				var l = Raphael.getTotalLength(path);
				r.ca.curve = function (value) {
					return {path: Raphael.getSubpath(path, 0, value * l)};
				};
				eve.once("click", function () {
					p.attr({curve: 0}).animate({curve: 1}, 1e4, "bounce");
				});
			}
		});
    });