JSFiddle - React, Tailwind, and code Playground

by Leonid Artemev

HTML

<svg width="800" height="600">
<rect style="fill:none;stroke:black;" x="0" y="0" width="800" height="600"/>

    
<path style="fill:red; stroke:black;" d="M0,0 h 100 v 100 h -100 z" 
    transform="translate(100,300) translate(-40,-40)  scale(1.8) rotate(45, 50, 50)"/>

<path style="fill:blue;stroke:black;" d="M0,0 h 100 v 100 h -100 z"
    transform="translate(100,300) "/>

<circle cx="150" cy="350" r="2" style="fill: white;"/>
</svg>

JavaScript

//var svg = $('<svg />').appendTo('body');
//svg.attr({width:100,height:100});
//svg.append('<rect/>');