JSFiddle - React, Tailwind, and code Playground

by Tiro

HTML

<div id="draw"></div>

JavaScript

var draw = SVG("draw");
    draw.size(500, 500);

function figure0(x, y, c) {
    draw.rect(c, c).move(x, y).fill("none").stroke({color: "blue", width: 2});
    draw.circle(c).move(x, y).fill("none").stroke({color: "red", width: 2});
}
//figure0(50, 50, 200);

function figure1(x1, y1, x3, y3) {
    var c = x3 - x1;
    var x = x1;
    var y = y1;
    draw.rect(c, c).move(x, y).fill("none").stroke({color: "blue", width: 2});
    draw.circle(c).move(x, y).fill("none").stroke({color: "red", width: 2});
}
//figure1(20, 20, 220, 220);

function figure2(x1, y1, x2, y2) {
    var c = x2 - x1;
    var x = x1;
    var y = y1;
    draw.rect(c, c).move(x, y).fill("none").stroke({color: "blue", width: 2});
    draw.circle(c).move(x, y).fill("none").stroke({color: "red", width: 2});
}
//figure2(40, 40, 240, 40);

function figure3(x1, y1, x2, y2) {
    var a = Math.abs(x2 - x1);
    var b = Math.abs(y2 - y1);
    var c = Math.sqrt(a*a + b*b);
    
    var x3 = x2 - b;
    var y3 = y2 + a;
    var x4 = x1 - b;
    var y4 = y1 + a;
    draw.line(x1, y1, x2, y2).stroke({color: "silver", width: 2});
    draw.line(x2, y2, x3, y3).stroke({color: "silver", width: 2});
    draw.line(x3, y3, x4, y4).stroke({color: "silver", width: 2});
    draw.line(x4, y4, x1, y1).stroke({color: "silver", width: 2});
    
    var x0 = x1 + (x3 - x1)/2 - c/2;
    var y0 = y1 + (y3 - y1)/2 - c/2;
    draw.circle(c).move(x0, y0).fill("none").stroke({color: "silver", width: 2});
    
    draw.circle(8).move(x1-4, y1-4).fill('blue');
    draw.text("x1, y1").move(x1-20, y1-25);
    draw.circle(8).move(x2-4, y2-4).fill('blue');
    draw.text("x2, y2").move(x2-20, y2-25);
    draw.line(x1, y1, x1, y4).stroke({color: "red", width: 1, dasharray: "15 5"});
    draw.line(x4, y4, x3, y4).stroke({color: "red", width: 1, dasharray: "15 5"});
    draw.line(x3, y3, x3, y2).stroke({color: "red", width: 1, dasharray: "15 5"});
    draw.line(x2, y2, x1, y2).stroke({color: "red", width: 1, dasharray: "15 5"});
   ...