JSFiddle - React, Tailwind, and code Playground

by gschutz

HTML

<div id="ete"></div>

CSS

#ete {
    border: 1px solid #777;
}

JavaScript

var map = SVG('ete').height(500);

var sx, sy, w, h;


map.rect(100,100).fill('none').stroke({width:.2});
map.rect(100,100).move(300,0).fill('none').stroke({width:.2});
map.rect(10,10).move(600,200).fill('none').stroke({width:.2});
map.rect(10,10).move(130,90).fill('none').stroke({width:.2});

var tool1 = map.group();
var tool2 = map.group();

tool1.rect(200,100)
    
    .fill('#ada');

tool2.rect(200,100)
    .x(400).y(100)
    .fill('#daa');

sx = 1.2;
sy = 1.0;
trans2(tool2, sx, sy, 600, 200)

trans2(tool1, 0.8, 1.0, 200,100, 100,100)

function trans2(tool, sx, sy, cx, cy, dx, dy) {
    dx = dx || 0;
    dy = dy || 0;
    
    tool.transform({
        a: sx, c: 0, e: cx-sx*cx + dx,
        b: 0, d: sy, f: cy-sy*cy + dy,
    });
}

function trans(tool, sx, sy) {
    var k = tool.bbox();
    var w = k.width;
    var h = k.height;
    
    tool.transform({
        a: sx, c: 0, e: k.x, //(w*(1-sx))/2,
        b: 0, d: sy, f: k.y, //(h*(1-sy)),
    });
}