3 ms·
A nice thing about the SVG version is that the entire effect is just a filter, and so you can apply it to any element: h2 { filter: url(https://dustri.
by chrismorgan 5y ago
A nice thing about the SVG version is that the entire effect is just a filter, and so you can apply it to any element:
h2 {
filter: url(https://dustri.org/b/files/glitch.svg#filter);
}
Now as it stands, this won’t work perfectly in all cases because the animation uses pixel values instead of percentages, so that it’s tied to an approximate text size.
By comparison, the CSS version can only be applied to text, and requires duplicating the text content at least once (the article duplicates it once in an attribute value, which is sufficient only for plain text; if you wanted any mixed formatting like bold or italics, you’d need to duplicate the element twice).
Also of glitch.svg: 6ßpx looks like an interesting number. Wonder if the error is intentional or not.
- zeeZ 5y agoẞ is right next to 0 on a German keyboard. Interestingly, searching for "6ßpx" gives a few results. This is probably the culprit, going by author name: https://codepen.io/DirkWeber/pen/ArFvk https://codepen.io/DirkWeber/pen/ArFvk
- _the_inflator 5y agoNice catch. :)