Multi-stroke text effect in CSS

(yuanchuan.dev)

91 points | by cheeaun 7 hours ago ago

7 comments

  • assimpleaspossi an hour ago

    People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.

    • cafebabbe 42 minutes ago

      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.

    • echoangle an hour ago

      This could actually be cool for display text like a headline. I don’t think that’s only for images.

  • HughParry 2 hours ago

    I 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

    • voidUpdate a minute ago

      firefox looks like an SDF (shortest distance to the object), I'm not sure what the chrome one is...

  • nicbou 4 hours ago

    Neat! It's unfortunate that the rendering is so different between browsers.

    Have you tried the same thing with shadows? They can also be stacked, I believe.

    • LoganDark 2 hours ago

      Shadows have to be spread in a circle to achieve an outline, so the general shape will converge to roughly a circle, barely following the shape of the text.