HN Explorer

17 comments

[ 4.5 ms ] story [ 33.3 ms ] thread
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.

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
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.
assimpleaspossi
People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
spartanatreyu
I would rather have both working together:

My example: https://codepen.io/spartanatreyu/pen/xggjWz

------------------------------------------------

Overall, CSS tends to be the better tool for the job.

SVG has better paths and more interesting filters, but it's held back by a few critical issues.

1. A small amount of filters are not hardware accelerated in firefox/servo's webrender engine, which causes them to fallback to software rendering. Usually it just freezes the web page for a second or two while the image software renders before returning to normal performance, but if you try to animate any of the values it locks up the entire page.

That basically animated SVGs with filters a no-go.

2. Safari doesn't draw SVGs properly, it has a built-in "performance budget" where it just stops drawing the rest of the SVG if it isn't finished within a split second. Which is fine for something like an icon, but terrible for things like the main feature graphic / background of a page.

Meanwhile CSS keeps getting better. Its filters are improving (filter, mix-blend-mode, backdrop-filter), and its animations are improving too (keyframes + animation, transition, offset, custom-properties + @property's syntax, scroll-timeline, cross-document view transitions).

The two things that CSS is worse at than SVG are:

1. Paths (in which case, you can just put SVG paths into your page and style them with CSS for anything more complex than a static stroke/fill anyway)

2. Generating textures (which you can't guarantee look consistent thanks to Safari, so you're usually better off sending a hand optimized texture over the wire anyway)

[deleted]
(comment deleted)
tiffanyh
OT: really love the design of this blog. Simple, clear and content first.
vjay15
This is so freaking cool
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/

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: '';
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.
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.
nntwozz
Eat your heart out Adobe Flash.
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.