This is so freaking cool
Multi-stroke text effect in CSS
21–30 of 50 posts
Re: Multi-stroke text effect in CSS
#22Earlier quoted context omitted.
firefox looks like an SDF (shortest distance to the object), I'm not sure what the chrome one is...
I would assume they are just drawing the outline, not performing any distance calculations, and the differences are just a result of different linejoin choices. [1] [1] https://www.w3.org/TR/fill-stroke-3/#stroke-linejoin
I'd imagine that at some point during the text rendering process, they have to generate an SDF of the text they want to render (it's what I did when I wanted to manually render text anyway). If they do, then they can generate the extra text-width lines basically for free, just fill everything with distance less than the property.
I may be entirely wrong though, I don't know in detail how browsers render stuff
Re: Multi-stroke text effect in CSS
#23People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
If you have a lot of "images" with such effects to generate from dynamic text, using SVG makes no sense, is vastly more complex and less flexible than the solution here.
You don't generate images, you just embed SVG nodes in the DOM. From the browser's perspective SVG and HTML elements are just two different types of element.
SVG is not great for text - HTML has more features - but for display text it's OK.
Re: Multi-stroke text effect in CSS
#24People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
The article literally says "it's not well-suited for production usage" so I don't really see the reason for the objection here. It's an experiment.
Re: Multi-stroke text effect in CSS
#25People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
I would think that quite a few powerful new ideas have come purely from abusing and bashing around older ideas.
Re: Multi-stroke text effect in CSS
#26People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
I'd send you the link to the person who made a 3d renderer in pure CSS, with a very slow render of lara croft, but Cohost shut down
Re: Multi-stroke text effect in CSS
#27Re: Multi-stroke text effect in CSS
#28[flagged]
Re: Multi-stroke text effect in CSS
#29I wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that's just because it's an edge case of rendering
I think Firefox applies more aggressive subpixel rendering and path smoothing before stroking. It resamples the glyph outline path at a higher precision level before handing it to the stroke algorithm.
Re: Multi-stroke text effect in CSS
#30OT: really love the design of this blog. Simple, clear and content first.
Ya! So many posts with clear presentations of css/svg/canvas.
The Daily Sketch series or 'CSS Animation with offset-path' are equally fun.