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="<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>