JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<svg height="500px" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g>
        <text x="10" y="20">This demo renders the exact same SVG four times.</text>
        <text x="10" y="40">The visual look and feel is completely controlled via CSS.</text>
        <text x="10" y="60">The text elements are also stylable.</text>
    </g>
    <g transform="translate(0,100)">
        <g class="no-fill outline-black monospace outline-thick">
            <text x="115" y="30">Rectangle</text>
            <rect x="10" y="10" height="100" width="100" />
            <text x="150" y="75">Circle</text>
            <circle cx="100" cy="100" r="50" />
        </g>
        <g class="outline-white outline-thick tiny-font" transform="translate(300)">
            <text x="115" y="30">Rectangle</text>
            <rect x="10" y="10" height="100" width="100" />
            <text x="150" y="75">Circle</text>
            <circle cx="100" cy="100" r="50" />
        </g>
        <g class="dashed comic colorful outline-thick large-font" transform="translate(0,200)">
            <text x="115" y="30">Rectangle</text>
            <rect x="10" y="10" height="100" width="100" />
            <text x="150" y="75">Circle</text>
            <circle cx="100" cy="100" r="50" />
        </g>
        <g class="flat crazy-text faded" transform="translate(300,200)">
            <text x="115" y="30">Rectangle</text>
            <rect x="10" y="10" height="100" width="100" />
            <text x="150" y="75">Circle</text>
            <circle cx="100" cy="100" r="50" />
        </g>
    </g>
</svg>

CSS

@media all and (min-width: 980px) {
    text {
        font-size : 2em;
        font-family: Arial;
        stroke : none;
        fill : #000000;
    }
}
@media all and (max-width: 980px) and (min-width: 500px) {
    text {
        font-size : 1em;
        font-family: Arial;
        stroke : none;
        fill : #000000;
    }
}
@media all and (max-width: 500px){
    text {
        font-size : .75em;
        font-family: Arial;
        stroke : none;
        fill : #000000;
    }
}
.tiny-font text {
    font-size: .65em;
}
.large-font text {
    font-size: 2em;
}
.no-fill {
    fill: none;
}
.outline-thick {
    stroke-width: 5px;
}
.outline-black {
    stroke: #000000;
}
.outline-white {
    stroke: #ffffff;
}
.monospace text {
    font-family:"Courier New", Courier, monospace
}
.comic text {
    font-family:"Comic Sans MS", cursive, sans-serif;
}
.colorful rect {
    stroke : #2C17B1;
    fill : #00B060;
}
.colorful circle {
    stroke: #FF4500;
    fill: #FFCA00;
}
.flat rect {
    stroke : none;
    fill : #00B060;
}
.flat circle {
    stroke: none;
    fill: #FFCA00;
}
.faded {
    fill-opacity: 0.6;
}
.dashed {
    stroke-dasharray: 10, 10;
    stroke-linecap: round;
}
.crazy-text text {
    font-family: Impact, fantasy;
    font-size : 2.5em;
    font-style: italic;
    text-decoration: underline;
    letter-spacing: .1em;
    stroke : #FF4500;
    stroke-width: 2px;
    stroke-opacity: 1;
    fill : #FFCA00;
}