In this ALL YOUR HTML coding session you’ll learn how to code the text outline effect seen on cornrevolution.com with Three.js and some GLSL. The original website was created by Resn.
This coding session was streamed live on April 18, 2021.
Those little line animations are a perfect way to enhance a design and add subtle micro-interactions to a website. Today I’d love to share some super-simple ideas that are based on CSS only, no JavaScript involved.
Most effects use a pseudo-element as line and some have a little SVG line animation, like this one:
The effect works by animating the stroke-dashoffset and we can use a super cool trick to “normalize” the path length so that we don’t have to bother with the real length that we would need to do the SVG line animation.
After exploring some distortion effects on line elements for links, I couldn’t wait but try them on some big style menus. So here is a little set of demos that shows some ideas for how to use those distortion effects. They were a great excuse to play with some of my favorite typefaces available on Adobe Fonts including Bely Display, Freight and Rigatoni.
How about a tiny squiggly line under an outlined text:
Or some distortion on a thick line with a gradient:
Or maybe two lines hugging the lovely Rigatoni typeface:
Let’s put that swirly line in front of a sexy serif:
Or be bold and make a strong contrasty box with a wave inside:
Today we’d like to share some ideas for distorted link effects with you. Inspired by Adrien Denat’s Distorted Button Effects with SVG Filters, we wanted to explore some effects on links, specifically lines, using SVG Filters. There’s lots to explore here, so we’d made a simple demo that shows a couple of these effects.
If you’d like to understand the underlying mechanism of how an SVG filter effect works, we recommend checking out Adrien’s article. And as always, we highly recommend Sara’s series on SVG filters.
Using underlines, circles and squares creates fun results. You can apply the SVG filter to any HTML elements, including the link text itself (see the last example).