JSFiddle - React, Tailwind, and code Playground

by javajosh

HTML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox = "0 0 1000 1000" version = "1.1">
    <defs>
        <rect id="s0" width="400" height="600" stroke='gray' stroke-width="2" fill="white" rx="50px"></rect>
        <!-- A circle of radius 200 -->
        <circle id = "s1" r = "80" fill = "yellow" stroke = "black" stroke-width = "3"/>
        <!-- An ellipse (rx=200,ry=150) -->
        <ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
        <polygon id="s3" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill = "green" stroke = "black" stroke-width = "3"/>
        <g id="g1">
            <use x="0" y="0" xlink:href = "#s0"></use>
            <use x="200" y="200" xlink:href = "#s1"></use>
            <use x="200" y="400" xlink:href = "#s1"></use>
        </g>
    </defs>
    <use  x="200" y="100" xlink:href = "#g1"></use>
</svg>

CSS

svg{border: 1px solid gray}
.oval{fill: blue}
svg{background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0tMiAxMEwxMCAtMlpNMTAgNkw2IDEwWk0tMiAyTDIgLTIiIHN0cm9rZT0iIzIyMiIgc3Ryb2tlLXdpZHRoPSI0LjUiPjwvcGF0aD4KPC9zdmc+"),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImciIHgyPSIxIiB5Mj0iMSI+CjxzdG9wIHN0b3AtY29sb3I9IiMxMTkiPjwvc3RvcD4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMENGIj48L3N0b3A+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZykiPjwvcmVjdD4KPC9zdmc+");}

JavaScript

//There are few interesting things about SVG:
//It expands to it's container. The "viewBox" defines a "canonical coordinate system"
//Within defs, position is NOT ignored. But it's not clear how it combines (I suspect additively)