JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div id="from">
    Test
</div>

CSS

#from {
    background: red;
}

JavaScript

console.clear();
const $offsetter = Symbol("offsetter");
let offsetId = 0;

function createOffsetter(node) {
    if (node[$offsetter]) return;
	const NS = "http://www.w3.org/2000/svg";

    let id = `__OFFSET${++offsetId}`;

    // Create SVG
    let svg = document.createElementNS(NS, "svg");
    svg.style.display = "none";
    let filter = document.createElementNS(NS, "filter");
    filter.id = id;
    let feOffset1 = document.createElementNS(NS, "feOffset");
    feOffset1.setAttribute("in", "SourceGraphic");
    feOffset1.setAttribute("result", "o1");
    let feOffset2 = document.createElementNS(NS, "feOffset");
    feOffset2.setAttribute("in", "SourceGraphic");
    feOffset2.setAttribute("dy", 50);
    let feComposite = document.createElementNS(NS, "feComposite");
    feComposite.setAttribute("in", "o1");
    svg.appendChild(filter);
    filter.appendChild(feOffset1);
    filter.appendChild(feOffset2);
    filter.appendChild(feComposite);
    document.body.appendChild(svg);

    let cssFilter = window.getComputedStyle(node).filter;
    cssFilter = cssFilter == "none" ? "" : cssFilter;
    cssFilter += ` url(#${id})`;
    node.style.filter = cssFilter;

    node[$offsetter] = feOffset2;
}

let from = document.querySelector("#from");
createOffsetter(from);