JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
#image {
    width: 200px;
    height: 200px;
    background-color: green;
    -webkit-filter: url(#directionalBlur);
    filter: url(#directionalBlur);
}
    </style>
</head>
<body>
<svg width="0" height="0" style="margin: 0; padding: 0;">
    <defs>
        <filter id="directionalBlur" filterUnits="userSpaceOnUse" x="0" y="0" width="1000%" height="1000%">
            <feGaussianBlur stdDeviation="30 0">
                <animate attributeName="stdDeviation"
                from="0 0"
                to="100 0"
                dur="5s"
                repeatCount="indefinite" />
            </feGaussianBlur>
        </filter>
    </defs>
</svg>
<div id="image">Test</div>
</html>