Multi-stroke text effect in CSS

Daily Digest email

Get the top HN stories in your inbox every day.

spankalee

This is made with (and by the author of) <css-doodle>, a web component that lets you put the CSS variant used in this blog inline into your HTML, like so:

    <script src="https://esm.sh/css-doodle/css-doodle.min.js?raw"></script>
    <css-doodle>
      @grid: 15 / 90%;
      border-radius: 50%;
      background: hsl(@t(/20), 70%, 60%);
      scale: sin(@atan2(@dx, @dy) + @ts);
    </css-doodle>

No JS needed except for loading the definition of the <css-doodle> component. Works in plain HTML, Markdown, frameworks, etc.

https://css-doodle.com/

port11

Thanks for the explanation. I’ve moved away from frontend work in 2018, and I really have no idea what CSS can do anymore! So much of the CSS in this page looks cryptic to me.

Kudos to the author for posting something cool and new in the age of standardised styles.

spankalee

css-doodle's syntax has a lot of non-standard-CSS stuff in it. All the @ things are extensions.

undefined

[deleted]

HughParry

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

chrismorgan

Stroke expansion is a complex topic, with more than one reasonable result (subjective preferences), and a whole lot of corner cases and incorrect answers.

Firefox has chosen to expand based on distance at all points, which is one of the reasonable answers and probably the most general one; a cusp then expands to a curve.

The others have chosen to retain cusps, which can be a reasonable answer and I believe is a lot cheaper to compute; but degenerate cases abound as you expand past the feature size (distances between nodes), so that by the fourth red ring it’s obviously incorrect.

Box shadows are another case where expansion occurs: the fourth length parameter, spread distance. If the corner is a cusp, the shadow corner will be a cusp. If it’s rounded, the shadow corner will be rounded. See https://drafts.csswg.org/css-backgrounds/#shadow-shape for some helpful diagrams. A sneaky trick: .1px border-radius means the box still looks square, but the expanded shadow will curve. Sometimes useful. But back on the original content of the article—if you use a font with microscopic curves instead of cusp nodes, Chromium/Safari will look more like Firefox.

SpyCoder77

There aren't many "corner" cases in Firefox :D

(Yes, it could technically be infinite corner cases)

zokier

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.

mfabbri77

Miter join (Safari) VS round join (Chrome)

nkrisc

The Firefox one looks like exactly what you’d expect from stepping the result of a SDF for that character. The rounded corners of the first layer would all be equidistant from the nearest corner of the original character.

voidUpdate

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

danbruc

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

voidUpdate

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

EMM_386

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.

myfonj

Ran into this discrepancy myself. On top that, what seemed also odd to me were the "dots" (tittle, period, semicolon) where oversized becomes hollow in the middle, like it cancels out itself. No other shape I've tried did that. And browsers surprisingly agreed on this.

Made few shots and playground for that back then: https://x.com/myfonj/status/1870178380831732160

npodbielski

Look at V in Love. It looks like bug in Chrome.

tiffanyh

OT: really love the design of this blog. Simple, clear and content first.

big_toast

Ya! So many posts with clear presentations of css/svg/canvas.

The Daily Sketch series or 'CSS Animation with offset-path' are equally fun.

Velocifyer

I wonder what is the best way to do double stroked text without using fancy Unicode characters while still displaying what the font recommends. I currently use fancy characters on [my blog](https://blog.velocifyer.com/), but that harms search results. I am in the processes of migrating my blog to 11ty (from manual HTML) and I want to improve my blog at the same time.

PS: Please give me comments on the current design of the blog.

eptityri

I just found out about https://css-doodle.com after reading that. A few months back, I was doing similar things with the HTML Canvas API. I didn’t know I could do these kinds of fun little things with CSS as well. Love that.

coneonthefloor

First thing I thought to do was add an emoji to the content. But it just shows the unknown char rectangle. I was hoping for magic, I guess.

herpdyderp

An emoji rendered for me but not any of the outline stuff, just a bare emoji.

asibahi

It works if you use Noto Emoji as the font.

nicbou

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

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.

joeframbach

When I modified your fiddle to use the Apple logo and colors, the first ring is eating part of the apple. The top of the apple is cut off. Any idea why that is?

      --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
      @content: '';

nntwozz

Eat your heart out Adobe Flash.

vjay15

This is so freaking cool

undefined

[deleted]

jacktu

[flagged]

Daily Digest email

Get the top HN stories in your inbox every day.