Recreating a retro multi-stroke text effect with CSS
By
yuanchuan
Crispy enough to crunch, soft enough to enjoy. A good bake.
Summary
A developer describes their journey trying to replicate a retro multi-stroke text effect using CSS. They initially struggled with the text-stroke property because it only accepts a single value, and stacking elements didn't work. After seeing the effect again in the book "Graphic Japan: from woodblock and zen to manga and kawaii," they became motivated to try a new approach by stacking several elements.
Key quotes
· 4 pulledI used to see that retro multi-stroke text effect quite often and tried to replicate it using the CSS text-stroke property, but the results never quite matched.
Because text-stroke accepts a single value, stacking elements was the only workaround I could think of, though it didn't seem to work.
One evening late last year, I was eager to give it another shot after seeing the text effect again in the book Graphic Japan : from woodblock and zen to manga and kawaii.
I kept stacking several elements
You might also wanna read
Creating Toon Text Titles with CSS and SVG Animation Techniques
This article by web designer Andy Clarke demonstrates techniques for creating animated Toon Text titles using modern CSS and SVG. The tutori
Smashing Magazine·5mo ago
How Classic Cartoon Animation Techniques Inspire Modern CSS Design
Web designer Andy Clarke explores how limitations of early cartoon animations (looping backgrounds, minimal frame changes) parallel modern C
Smashing Magazine·1y ago