This is made with (and by the author of) &lt;css-doodle&gt;, a web component that lets you  put the CSS variant used in this blog inline into your HTML, like so:<p><pre><code>    &lt;script src=&quot;https:&#x2F;&#x2F;esm.sh&#x2F;css-doodle&#x2F;css-doodle.min.js?raw&quot;&gt;&lt;&#x2F;script&gt;
    &lt;css-doodle&gt;
      @grid: 15 &#x2F; 90%;
      border-radius: 50%;
      background: hsl(@t(&#x2F;20), 70%, 60%);
      scale: sin(@atan2(@dx, @dy) + @ts);
    &lt;&#x2F;css-doodle&gt;
</code></pre>
No JS needed except for loading the definition of the &lt;css-doodle&gt; component. Works in plain HTML, Markdown, frameworks, etc.<p><a href="https:&#x2F;&#x2F;css-doodle.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-doodle.com&#x2F;</a>

I wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that&#x27;s just because it&#x27;s an edge case of rendering

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

Neat! It&#x27;s unfortunate that the rendering is so different between browsers.<p>Have you tried the same thing with shadows? They can also be stacked, I believe.

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

HN

Multi-stroke text effect in CSS

Comments (31)