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
While I don't entirely love the rounding effect of firefox, I feel Chrome interpretation is just wrong in creating spurious spikes. Intuitively for the asterisk shape I'd expect the outline to go towards a plain hexagon, something that neither browser accomplishes.
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]
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.
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.
OT: really love the design of this blog. Simple, clear and content first.
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
While I don't entirely love the rounding effect of firefox, I feel Chrome interpretation is just wrong in creating spurious spikes. Intuitively for the asterisk shape I'd expect the outline to go towards a plain hexagon, something that neither browser accomplishes.
Look at V in Love. It looks like bug in Chrome.
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
People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
Too late: https://codepen.io/jaysalvat/pen/kazzOj
Art is often made from clever use of things that were not intended to make art. Let them have fun.
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.
This could actually be cool for display text like a headline. I don’t think that’s only for images.
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.
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.