JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<svg>
    <g id="gridlines" name="gridlines"></g>
    <g id="tri1"></g>
    <circle cx='500' cy='250' r='115.47005383792519' fill='rgba(255,255,255,0.3)' />
</svg>
<div id="html" style="top: 0; position: absolute; display: none">
    <p>Hello HTML</p>
</div>
<div id="restore-view"> <u>Restore viewport</u><strong> X</strong>

</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #222;
}
html div:nth-child(2) {
    position: fixed;
    top: 0;
    left: 0;
    background: #c8e6ff;
    font-family: sans-serif;
    font-size: 1.3vmax;
    margin: 1em;
    padding: 0.4em 0.5em 0.4em 0.5em;
    border-radius: 0.3em;
    text-shadow: 1px 1px 1px white;
    line-height: 1em;
    display: none;
    cursor: pointer;
    z-index: 1000;
    letter-spacing: 0.2em;
}
p, text {
    font-size: 1em;
    font-family: times;
    line-height: 0;
}
#restore {
    font-size: 1px;
    fill: blue;
    cursor: pointer;
    display: none;
}
@-webkit-keyframes blinker {
    0% {
        background-color: rgba(240, 240, 255, 0.95);
    }
    50% {
        background-color: rgba(0, 255, 255, 0.6);
    }
    100% {
        background-color: rgba(240, 240, 255, 0.95);
    }
}
@keyframes blinker {
    0% {
        background-color: rgba(240, 240, 255, 0.95);
    }
    50% {
        background-color: rgba(0, 255, 255, 0.6);
    }
    100% {
        background-color: rgba(240, 240, 255, 0.95);
    }
}
div#restore-view.fade-in-restore-notification {
    display: block;
    -webkit-animation-name: blinker;
    animation-name: blinker;
    -webkit-animation-duration: 2.6s;
    animation-duration: 2.6s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
div#restore-view.fade-in-restore-notification:hover {
    text-shadow: 1px 1px 1px white;
}
div#restore-view.fade-in-restore-notification strong {
    margin-left: 0.3em;
}
::-moz-selection {
    background: #f5da55;
    color: #CC0000;
}
::selection {
    background: #f5da55;
    color: #CC0000;
}
::-moz-selection {
    background: #f5da55;
    color: #CC0000;
}
::selection {
    background: #f5da55;
    color: #CC0000;
}
.something {
    tansform: rotate(20deg);
    -webkit-backface-visibility: hidden;
    backface-visibility:...

JavaScript

var svg = document.getElementsByTagName('svg')[0],
    html = document.getElementById('html');

(function () {
    function removeElement(el) {
        el.innerHTML = '';
        el.parentNode.removeChild(el);
    }

    if (true) {
        removeElement(html);
    } else {
        removeElement(svg);
        html.style.display = 'block';
    }
}());

var ut = ut || {};

// Create element with name space
ut.createNS = function (type) {
    var namespace = 'http://www.w3.org/2000/svg';
    return document.createElementNS(namespace, type);
};
// CSS animation
ut.animation = function (element, animationValue) {
    element.style.animation = animationValue;
    element.style.WebkitAnimation = animationValue;
};
// CSS transformOrigin
ut.transformOrigin = function (element, transformOriginVal) {
    element.style.transformOrigin = transformOriginVal;
    element.style.WebkitTransformOrigin = transformOriginVal;
};

// chain attributes and assign attributes as object key value pairs
var attr = attr || {};

function attr(obj, attrObj, attrValue) {
    if (typeof obj === 'object') {
        if (typeof attrObj === 'object') {
            var attributes;
            for (attributes in attrObj) {
                obj.setAttributeNS(null, attributes, attrObj[attributes]);
            }
        } else if (typeof attrObj === 'object' && typeof attrValue === 'string' || 'number') {
            obj.setAttributeNS(null, attrObj, attrValue);
        } else {
            throw obj;
        }
    } else {
        throw obj;
    }
}

// Escape
var
esc = esc || {

    viewBox: {
        x: 0,
        y: 0,
        width: 1000,
        height: 500
    },

    preserveAspectRatio: {
        align: 'xMidYMid',
        meetOrSlice: 'meet'
    },

    backgroundColor: 'rgba(17,47,61,0.8)'

};

// Grid
esc.grid = {

    development: 1,
    horizontal: 10,
    vertical: 20,
    coordinates: true
    // Need to add metric options 
};

var escape = escape || {};

escape = (function (esc,...