JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<svg id="svg" width="640" height="480"></svg>

JavaScript

class SVG {

  static create(qualifiedName) {
    return document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
  }

  static attr(target, props) {
    for (let key in props) {
      target.setAttribute(key, props[key]);
    }
  }

}

const Well = (id, position) => {
  const g = SVG.create('g');
  g.id = id;

  const circle = SVG.create('circle');
  SVG.attr(circle, {
    cx: position[0],
    cy: position[1],
    r: 5,
    fill: '#C8CEDA'
  });

  g.appendChild(circle);
  return g;
}

const w1 = Well(1, [100, 100]);
const w2 = Well(2, [300, 200]);

const w11 = Well(3, [100, 100]);
const w22 = Well(4, [300, 200]);

const originLayer = SVG.create('g');
const transformedLayer = SVG.create('g');

const svg = document.getElementById("svg");

originLayer.appendChild(w1);
originLayer.appendChild(w2);

transformedLayer.appendChild(w11);
transformedLayer.appendChild(w22);

svg.appendChild(originLayer);
originLayer.appendChild(transformedLayer);

const createMat = (tx, ty, k) => [
	k, 0, 0, k, -k * tx + tx, -k * ty + ty
];

const mat = createMat(100, 100, 1.5);

SVG.attr(transformedLayer, { transform: `translate(50, -50)` });