Custom Custom SVG filters

Overview

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

Syntax

Use data-tor="<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.

filter shortcut

You can use @F= shortcut instead of writing full @filter= to make your code shorter.

Examples

The <mouse> examples uses {method: 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="scroll:@filter=<variant>(<amount>)".

<div data-tor="mouse:@F=blur(0px;20px)">blur</div>
<div data-tor="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="mouse:@filter=<variant>(<amount>)".

<div data-tor="mouse:@filter=blur(0px;20px, {method: start})">blur</div>
<div data-tor="mouse:@filter=grayscale(0%;100%, {method: start})">greyscale</div>

mouseX

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

<div data-tor="mouseX:@filter=blur(0px;20px, {method: start})">blur</div>
<div data-tor="mouseX:@filter=grayscale(0%;100%, {method: start})">greyscale</div>

mouseY

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

<div data-tor="mouseY:@filter=blur(0px;20px, {method: start})">blur</div>
<div data-tor="mouseY:@filter=grayscale(0%;100%, {method: start})">greyscale</div>