JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

Content <span id="content">red</span>

<svg>
    <filter id="minimap">
        <feOffset in="SourceGraphic" result="offset" dx="50" dy="50" />
        <feComposite operator="over" in="SourceGraphic" in2="offset" result="final" />
    </filter>
</svg>

SCSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
html {
    -webkit-filter: url(#minimap);
}
body {
    background: rgba(0, 255, 0, 0.3);
}
span {
    color: red;
}
svg {
    display: none;
}

JavaScript

setInterval(function () {
    var update = document.querySelector("#content");
    if (update.innerText == "red") {
        update.style.color = "blue";
        update.innerText = "blue";
    }
    else {
        update.style.color = "red";
        update.innerText = "red";
    }
}, 1000);