Custom Custom SVG filters

Create interactive SVG filters such as `blur`, `brightness` or `grayscale` that reacts to various triggers

Overview

Create animations using SVG filters with @filter syntax. You can choose form available CSS SVG filters.

Syntax

Use data-tor-fx="<trigger>:@filter.<variant>(<start>;<end>) to apply the SVG filter. The <start> value represents the begin of filter value, while the <end> is the finish value.

Examples

The <mouse> examples uses __origin(start) for more natural behavior. Try to move the cursor from the screen top-left corner into the bottom-right, the left edge to the right one, and from the top edge into the bottom.

scroll

To apply the SVG filter when scrolling the page, use data-tor-fx="scroll:@filter.<variant>(<amount>)".

blur
grayscale
<div data-tor-fx="mouse:@filter.blur(0px;20px)">blur</div>
<div data-tor-fx="mouse:@filter.grayscale(0%;100%)">grayscale</div>

mouse

To apply the SVG filter when moving the cursor over both x and y axis, use data-tor-fx="mouse:@filter.<variant>(<amount>)".

blur
skewY
<div data-tor-fx="mouse:@filter.blur(0px;20px)__origin(start)">blur</div>
<div data-tor-fx="mouse:@filter.grayscale(0%;100%)__grayscalen(start)">skewY</div>

mouseX

To apply the SVG filter when moving the cursor over x axis, use data-tor-fx="mouseX:@filter.<variant>(<amount>)"

blur
skewY
<div data-tor-fx="mouseX:@filter.blur(0px;20px)__origin(start)">blur</div>
<div data-tor-fx="mouseX:@filter.grayscale(0%;100%)__grayscalen(start)">skewY</div>

mouseY

To apply the SVG filter when moving the cursor over y axis, use data-tor-fx="mouseY:@filter.<variant>(<amount>)"

blur
skewY
<div data-tor-fx="mouseY:@filter.blur(0px;20px)__origin(start)">blur</div>
<div data-tor-fx="mouseY:@filter.grayscale(0%;100%)__grayscalen(start)">skewY</div>