[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.