JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="motionBlur">
    <p>Phasellus gravida semper nisi. Nam pretium turpis et arcu. Duis vel nibh at velit scelerisque suscipit. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla.</p>

    <p>Suspendisse potenti. Etiam feugiat lorem non metus. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Pellentesque dapibus hendrerit tortor. Pellentesque auctor neque nec urna.</p>

    <p>Morbi mollis tellus ac sapien. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Nunc interdum lacus sit amet orci. Nunc nonummy metus. Phasellus tempus.</p>
</div>

SCSS

.filters{
    display: none;
}
.motionBlur{
    -webkit-filter: url("#blur");
	filter: url("#blur");
}

body{
    font-family: sans-serif;
}

JavaScript

/**
 * Motion Track
 */
var motionTrack = {
    filter: null,
    init: function(){
        this.appendFilter();
        console.log(this.filter);
        this.filter.setAttribute('stdDeviation', '10,0');
    },
    appendFilter: function(){
        document.body.innerHTML = document.body.innerHTML + '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="motionTrack-filters" class="filters"><defs><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0,0" /></filter></defs></svg>';
        var filter = document.getElementById('blur');
        var filterProps = filter.childNodes;
        motionTrack.filter = filterProps[0];
    }
}

motionTrack.init();