I used to see that retro multi-stroke text effect quite often and tried to replicate it using the CSS text-stroke property, but the results never quite matched. Because text-stroke accepts a single value, stacking elements was the only workaround I could think of, though it didn't seem to work.

One evening late last year, I was eager to give it another shot after seeing the text effect again in the book Graphic Japan : from woodblock and zen to manga and kawaii.

I kept stacking several elements and accidentally varied the text-stroke-width for each layer. To my suprise, the result was getting closer this time.

--c: #cc0d55;
--n: @i(-1);

@grid: 36x1 / 240px;
@content: '✱';

position: absolute;
inset: 0;
font: 100px/0 sans-serif;
color: var(--c);
z-index: @I(-@i);

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));

How it works

For different values of the text-stroke-width, browsers will automatically draw outlines of the charater, The larger you set the stroke width, the thicker the outline will get, while still maintain its original shape.

@grid: 7x1/ 360px auto noclip; @content: '✱'; font: 50px/0 sans-serif; color: transparent; -webkit-text-stroke-color: #cc0d55; -webkit-text-stroke-width: @i(*1.8px);

The next step is to use different colors and put them in order.

@grid: 12x1/ 100px ß #f4e1e8; @content: '✱'; position: absolute; inset: 0; z-index: @I(-@i); font: 50px/0 sans-serif; color: transparent; -webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55); -webkit-text-stroke-width: @i(*3px);

The interesting part is how the browsers outlining the character shapes differently. FireFox offers more smoother rendering than in Chrome and Safari.

Another interesting part is when there are more text put inline, the character shapes will be merged.

/* ... */
@content: '秋收冬藏';

Trying different fonts

The final result really depends on the font you choose. To help experimenting with different fonts more quickly, I added the @google-font function for faster font loading.

font-family: @google-font(Matemasie);
@content: 'b';

font-family: @google-font(Tangerine);
@content: 'Love';

font-family: @google-font('Cherry Bomb One');
@content: '+';

Unfortunately, the performance is as bad as CSS filters, especially when the font-size is getting bigger, you may have noticed some flicking above. It's fine for experiments like this, or for generating images with css-doodle, but it's not well-suited for production usage.

More examples

Here are two more examples to play around with different colors and characters, generated with css-doodle, just for fun.

CodePen link for the first one: https://codepen.io/yuanchuan/pen/ogzarGo

I created a small command line tool named aivo, it helps to manage API keys from OpenRouter, Vercel AI Gateway or any other providers.

aivo keys add

After adding your keys, you can launch Claude code, Codex or Gemini CLI tools without manually setting up all the env variables.

aivo claude

Protocol transformation

Aivo will automatically transform protocols from one to another whenever necessary, so you can use DeepSeek, MiniMax, Kimi or the locally running models in either Claude code, Codex, or Gemini.

# add the key
aivo keys add --base-url=https://api.deepseek.com/v1 --key=xxx

# run claude with deepseek
aivo claude --model=deepseek-chat

# run gemini with deepseek
aivo gemini --model=deepseek-chat

If you're unsure of the model name after adding the key, just leave it blank, aivo will load the available models for you to select.

aivo claude --model

GitHub Copilot

You can also use your GitHub Copilot subscriptions. Choose the coding agent you like after connecting.

aivo keys add copilot

Ollama

To connect Ollama, either point to the lcoal URL or just add a key named ollama.

aivo keys add ollama

After connecting, the model will automatically pull if not present

aivo claude -m kimi-k2.5:cloud
aivo claude -m stable-code:latest

Other features I like

Instant chat.

aivo -x 'tell me a story'

Summarize git changes.

git diff --cached | aivo -x "summarize the changes"

Get the token statistics.

aivo stats

Give it a try

While there are many alternatives, I've found most of them too complex or heavy to use. I hope aivo will improve the overall user experience.

Get the install link or learn more about its usage on GitHub.

A while back, I coded the CBC (Canadian Broadcasting Corporation) logo with a quick css-doodle implementation. There are certainly better ways to do it, but I chose to stack several black boxes and circles, because the background color was black, those black boxes ended up becoming "invisible" as desired.

You can see how it works by using a different background other than black.

I couldn't find an elegant way to not use the black color, and I was reluctant to use CSS masks since it would require more calculations.

One solution

It just hit me tonight that I could use shaders to get rid of the black color, and it's so simple.

In css-doodle, code can generate images in real time, which can be used as textures and fed into shaders for additional effects.

background: @shaders(
  texture_0 {
    /* css-doodle code */
  }

  fragment {
    /* glsl code */
  }
)

This is the old implementation.

@grid: 13x1 / 240px;
@place: center;
@size: 30%;

background: #000 @svg(
  viewBox: -1 -1 2 2;
  circle { r: .9; fill: red }
);

translate: @pn(
  -75% 0, 75% 0, 0 -75%, 0 75%,
  -50% 50%, 50% 50%, 50% -50%, -50% -50%,
  -50% 0, 50% 0, 0 -50%, 0 50%,
  0 0
);

Turn it into a texture and mask out all the black pixels.

@grid: 1 / 240px / @shaders(
  texture_0 {
    @grid: 13x1 / 100%;
    @place: center;
    @size: 30%;
    background: #000 @svg(
      viewBox: -1 -1 2 2;
      circle { r: .9; fill: red }
    );
    translate: @pn(
      -75% 0, 75% 0, 0 -75%, 0 75%,
      -50% 50%, 50% 50%, 50% -50%, -50% -50%,
      -50% 0, 50% 0, 0 -50%, 0 50%,
      0 0
    );
  }
  fragment {
    void main() {
      vec2 uv = gl_FragCoord.xy / u_resolution.xy;
      vec4 c = texture(texture_0, uv);
      float b = length(c.rgb);
      float alpha = smoothstep(0.0, 1.0, b);
      FragColor = vec4(c.rgb, c.a * alpha);
    }
  }
);

The difference blending mode

I often use blend modes to create some combinations of shapes. The tricky part, though, is working with color. While there are some predictable patterns, the results of different color combinations can be hard to anticipate. So most of the time, I just use white color with the difference blend mode, which produces black-and-white patterns.

@grid: 8x1 / 240px / #f90 +.8;
@place: @plot(r: .5);
@size: 50%;
background: #fff;
border-radius: 50%;
mix-blend-mode: difference;

Now I can directly remove the black color and make the pattern transparent, it becomes much more usable.

@grid: 1 / 240px / #f90;
background: @shaders(
  texture_0 {
    @grid: 8x1 / 100% +.8;
    @place: @plot(r: .5);
    @size: 50%;
    background: #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
  }
  fragment {
    void main() {
      vec2 uv = gl_FragCoord.xy / u_resolution.xy;
      vec4 c = texture(texture_0, uv);
      float b = length(c.rgb);
      float alpha = smoothstep(0.0, 2.0, b);
      FragColor = vec4(c.rgb, c.a * alpha);
    }
  }
);

This approach isn’t anything special, after all, shaders are naturally good at handling colors, but it still brings me joy.

This is from last year when I tried to recreate Rach Smith's P5.js animation using CSS. The animation seemed like it could be implemented in a breeze, but there's an illusion of simplicity. The process of manually updating the positions and directions of each box was a bit tricky.

After some effort, I realized that I only needed to track the positions of a single box in keyframes, the rest would follow and be evenly separated through different values of animation-delay. Negative delays were used to start the animation immediately.

.box {
  /* ... */

  position: absolute;
  animation: move 10s linear infinite;
  animation-delay: calc(var(--index) / var(--total) * -10s);
}

@keyframes move {
  0%, 100% { left: 25%; top: 25% }
  25%      { left: 75%; top: 25% }
  50%      { left: 75%; top: 75% }
  75%      { left: 25%; top: 75% }
}

A few days later, I found a simpler method and got it working with the offset-path property. The inset() function would create a square path and then the boxes would move along with it by animating the offset-distance values.

I was excited because I had previously thought that offset-path only supported SVG paths.

.box {
  /* ... */

  offset-path: inset(25%);

  animation: move 10s linear infinite;
  animation-delay: calc(var(--index) / var(--total) * -10s);
}

@keyframes move {
  to {
    offset-distance: 100%;
  }
}

Linear scale

Since the boxes were evenly spaced, the animation-delay values needed to be equally distributed proportionally according to each box's index. The calculation process is referred to as linear scaling, or a simplified form of linear interpolation.

/* -0.5s, -1s, -1.5s, -2s, ... , -9.5s, -10s */
var(--index) / var(--total) * -10s

Browers are now shipping tree counting functions, so that the predefined variables can be replaced with native sibling-index() and sibling-count() functions.

sibling-index() / sibling-count() * -10s

Linear scaling has many use cases, such as creating a range of opacities or colors.

@grid: 10x1 / 400px auto; background: #000; opacity: @iI();

opacity: calc(sibling-index() / sibling-count())

@grid: 36x1 / 400px 30px; background: hsl(@iI(*360deg), 80%, 50%);

background: hsl(
  calc(sibling-index() / sibling-count() * 360deg),
  80%, 50%
)

Compared to calc() expressions, the @iI() function in css-doodle provides a more concise and readable way to achieve the same result.

/* opacity: calc(sibling-index() / sibling-count()) */
opacity: @iI()

/* animation-delay: calc(sibling-index() / sibling-count() * -10s) */
animation-delay: @iI(*-10s)

Rewrite with css-doodle

When using css-doodle, the code becomes even simpler. The function @t can replace both animation and keyframes, as explained in the post Time-based CSS Animations.

offset-distance: @t(/100%, +@iI(*100%));

Below is the complete code used for the animation. (CodePen)

@grid: 20x1 / 240px / #f2f0e9 ß2;
@size: 6% auto 1;

border: solid 2px hsl(
  @iI(*360deg), 100%, 34%
);

offset-distance: @t(/100%, +@iI(*100%));
offset-path: inset(25%);

Note that the inset() function supports a round keyword, adding a rounded corner to the path will get the boxes a subtle flipping effect as they turn the corners.

/* ... */

offset-path: inset(25% round 1%);

Offset-path with polygon()

I recently discovered that offset-path accepts polygon() and other shape functions. I can't believe I hadn't tried it earlier -- there are so many shapes that polygon() can create and apply to offset-path, some of them may result in interesting animations.

The tool css-doodle also offers the @shape function to generate polygons with ease.

/* heart */
offset-path: @shape(heart);

/* hexagon */
offset-path: @shape(hexagon);

/* custom shapes */
offset-path: @shape(
  points: 12;
  r: seq(.5, 1);
)

A trailing effect will be produced when making a slight change to the offset-distance ratio. (CodePen)

/* ... */

@size: @iI(*5%);
opacity: @iI();

offset-distance: @t(/50%, +@iI(*8%));

offset-path: @shape(
  points: 180;
  scale: .012;
  r: 50*abs.sin(2.5t)-81;
);

Another example of custom shapes with polygons. The performance is not as good as in canvas, but it's still fun to play with. (CodePen)

@grid: 20x1 / 240px / #051d1b;
@place: center;
@size: @iI(*50%, +50%);
filter: drop-shadow(0 0 5px #9bff9b);
background: @doodle(
  @grid: 20x1 / 100%;
  @size: @r(1%) @r(2%);
  position: absolute;
  background: @p(#93ffe4, #84ff92);
  offset-rotate: auto 90deg;
  offset-distance: @t(
    /@r(50%, 500%),
    +@iI(*100%)
  );
  offset-path: @shape(
    points: 180;
    r: cos(4t)
  );
);

Beesandbombs's spiral animation

I once saw a cool animation made by @beesandbombs. I couldn't find a simple way to recreate it with CSS before, but now it's possible to do it with offset-path.

Let's start by creating polygons with sides ranging from 3 to 13 and place them in the background.

@grid: 1 / 240px / #f5f5f5 @svg(
  viewBox: -5 -5 10 10;
  fill: none;
  stroke-width: .035;
  stroke: #000;
  polygon*13 {
    points: @Plot(
      points: @n2;
      r: @nN(*3.2);
      rotate: @n(*90, /@n2);
    );
  }
);

In the original animation, the length of each polygon side is the same, so the corresponding r should be adjusted based on the fixed side length.

@grid: 1 / 240px #f5f5f5 @svg(
  viewBox: -5 -5 10 10;
  fill: none;
  stroke-width: .035;
  stroke: #000;
  polygon*13 {
    points: @Plot(
      points: @n2;
      r: $(.7 / cos(@n(*π, /@n2, /2)));
      rotate: @n(*90, /@n2);
    );
  }
);

The painting order in SVG is determined by the order of the elements, after adding colors to the polygons, the smaller polygons appear to be covered by the larger ones. Therefore, the order of the polygons needs to be reversed.

@grid: 1 / 240px / #fff @svg(
  viewBox: -5 -5 10 10;
  fill: none;
  stroke-width: .035;
  polygon*13-1 {
    stroke: hsl(@nN(*360), 80%, 50%);
    points: @Plot(
      points: @n2;
      r: $(.7 / cos(@n(*π, /@n2, /2)));
      rotate: @n(*90, /@n2);
    );
  }
);

The final step is to add small dots and create identical offset paths corresponding to the polygons in the background, and then animate them using offset-distance. (CodePen)

@grid: 1x13 / 240px / #f5f5f5 @svg(
  viewBox: -5 -5 10 10;
  fill: none;
  stroke-width: .035;
  polygon*13-1 {
    stroke: hsl(@nN(*360), 80%, 50%);
    points: @Plot(
      points: @n2;
      r: $(.7 / cos(@n(*π, /@n2, /2)));
      rotate: @n(*90, /@n2);
    );
  }
);

@size: 2% auto 1;
border-radius: 50%;
background: #000;

offset-path: @shape(
  points: @i2;
  turn: -1;
  r: $(.14 / cos(@i(*π, /@i2, /2)));
  rotate: @i(*90, /@i2);
);
offset-distance: calc(
  240px/@I3 + @t(/160%, *@I2(-@i))
);

Another puzzle solved, just like every time, it's been a lot of fun :)

This is a rough transcript based on my notes for the sharing session I presented at the online Groove meetup in June. I've shared the slides before, but I think it's worth putting the content in writing. The full slide deck is accessible on GitHub.

css-doodle is a project I started many years ago. Initially, it was used to draw some simple graphic patterns, but over time, it evolved into a tool for creative coding and generative art. I’ve always wanted to write an article about css-doodle, and today I finally have the chance to give an introduction to it.

So how did css-doodle begin?

One day I came across a background pattern on Dribbble, by the product designer Jan-Paul Koudstaal. I was attracted by its colors and simplicity, and thought it might be a fun exercise to recreate it with CSS.

I’m sure many people have had the same experience as me -- seeing a graphic shape and wondering if it could be created with CSS.

The first solution came to me was to use a grid of elements with different background colors and border radius values. The problem is that manually creating and assigning values to each element can be quite tedious. Although there are preprocessors helping me to generate HTML, there’s still a lot of code.

In CSS, there are usually multiple ways to do just one thing. For example, the quarter circle in this pattern could also be made with clip-path or radial-gradient. What I want is to focus on these key properties.

To explore CSS properties more efficiently, I used JavaScript to generate the grid and setup all the random variables. This is an earlier Web Component project prior to css-doodle that did the code generation.

The idea behind css-doodle originated from that earlier project. The main difference is that it uses CSS directly rather than JavaScript to describe the styles. This is how the css-doodle code looks like to create the same pattern:

First, we generate a 6x5 grid with the container width in 37vw and a faint background color. Next, for each cell I pick a random color from the given color list using the @p() function. Then the same way to randomly pick border-radius values from another list generated with the @cycle() function.

Another way to create this pattern is to use clip-path and the native circle() function.

Or use radial-gradient.

Create the circle shape using radial-graident and then place the circle to 4 different places.

As you can see the syntax of css-doodle is very similar to CSS, with the addition of a few extra functions.

css-doodle doesn’t have a CSS parser like SASS or any other pre-processors. It doesn’t interpret the syntax of colors or gradients but takes a different approach.

One reason for this is that I can’t catch up the evolution of CSS on my own. New features, such as units and color functions, are being added to CSS all the time. It would take time to sync the updates.

This turned out to be the right decision, as I can always use the latest CSS features without upgrading css-doodle.

A Typical CSS rule consists of three different parts: Selector, Property, and Value.

css-doodle aims to extend CSS in these three parts. It doesn’t alter anything, only including several new selectors and properties, which begin with the @ symbol in order to distinguish them from native properties and selectors.

There is an example -- a grid where @i represents the index value of the current cell. setting the value to @content inserts the value as a text node, I often use it for debugging.

The @odd selector applies the rules in its block only to cells with odd indices, so only the odd-numbered cells have a black background.

You can also set a background color for a specific cell, the CSS cascade rules will apply as expected.

The variables attached to the cells are quite useful for making differentiated changes. In this case, I give each cell a different size and rotation according to its index value.

The @i is a variable as well as a function. Instead of using calc(), I can also put expression in function parameter to get the calculation with @i directly.

Let’s get into the function syntax.

If there’s no argument or parameter for the function, the parentheses can be omitted. Here the first and the second are literally the same.

If there’s an operator attached at the head or the tail of the parameter it will try to do calculations with itself and the returned function value.

This is another function where the previous three are equal.

If the first parameter is a number, the function name and the number can be put together to form another function, It’s like curry in functional programming.

Multiple functions can be chained together using dots, known as function composition. The output of each function will be the input of the previous one.

Here is an example of the random distribution by calling the @r function four times.

Random functions play an important role in generative art. In css-doodle there are two categories of random functions.

The first group is picking, to pick a value from a given list. The name is inspired by the Logo programming language.

There are five cells, each will pick a value from 1 to 5. The pick functions also recognize a shorthand input like regular expressions, to save some characters. The upper case @P will pick a random value but ensure the next one is different from the previous value. It can be useful in some scenarios like picking colors.

css-doodle can be used to as a tool for learning CSS properties. It's easy to setup a grid and make a comparison to different values.

Another group is random value generation, @r and @R (or @rn).

The lower case @r is to get a random value from a given range, defaults to 0 to 1.

The uppercase @R is to get a random value using Perlin noise.

In P5.js you need to use noise() and map function together, while in css-doodle the @R() function will do the two actions in one place. After getting the noise value it will map the value to a given range according to the context.

There's an example using the noise function @R().

By default css-doodle will use the current timestamp for random seed. If you forget to set a random seed and also want to keep the current result, you can always use devtools or JavaScript to get the seed property from the css-doodle element.

There are some other kind of functions for generating. I call them generator functions.

These functions generate values or transform the input to other forms, such as repeating or reversing a list. They are usually used in conjunction the picking group functions like @p().

The most frequently used is function @m(). It accepts two parameters, the first is the iteration count, the second is the value to be generated.

In CSS, properties like background-image, box-shadow accept multiple values, and these values are separated by commas. So the @m() function will join the values with commas automatically.

The @m() function is much like a for-loop but in a declarative way.

Sometimes I don't wish CSS to adopt for-loops just to mirror other programming languages. There are certainly different ways to achieve the same result, like @m(). We need to explore more possibilities in declarative syntax.

OK next, background functions.

I have experimented with many functions that generate images to CSS background. The CSS painting API also uses background. It seems CSS background is a desirable place to extend the ability of CSS.

To me CSS background is like a mirror or a digital screen, everything inside it is virtual and untouchable since there's no actual DOM inside there. But it gives us a window for imagination and a bridge to connect other things.

With @doodle function I can use the rule of css-doodle to generate a background image. CSS itself can not generate new elements but I can open another dimension inside background. No gradient hacks anymore.

They can even be nested.

I added a @shaders() function to enable shader programming more straightforward. I haven’t used it much. The shader function and the removed canvas() function is quite low lever, which means one needs to write a lot of code to draw something.

I prefer to use the @pattern() function. It was built on top of shaders and the syntax was designed similar to CSS. It’s much higher lever and has a single purpose. Maybe I should build more functions like this.

Browsers support SVG as CSS background natively, so I simplified the syntax of SVG to make it more like writing CSS, encouraging me to use SVG more.

If you're interested in this idea, there’s a detailed blog post about this syntax:

The last section is about shapes. I'll skim through it.

These are the builtin shapes in css-doodle, which are generated with clip-path.

To make one element into a shape, you can use the @shape property declaratively. Another option is to use the @shape() function.

The @shape() function is also a generator, it provides several commands to define a customized shape with mathematical functions.

Simple rules can create a wide variety of patterns. It’s fascinating to discover some new shapes this way.

There’s the playground and a blog post exploring more shapes.

This is one of my favorite shapes, which demonstrates the power of negative space.

This video mentioned about the negative space and talked about the importance of setting limits, which reminded me of css-doodle, particularly its performance considerations and the limitations of CSS grids.

Creating visually appealing graphic designs or artwork doesn’t require a lot of elements. The key is to view things differently. I highly recommend watching this video. It’s truely beautiful.

Here is the project website and a collection of CodePen demos using css-doodle. The documentation is not complete, and I still need to work on it.

I hope you enjoy this introduction to css-doodle. Thank you!

For the past week, I've been working on a command-line tool to generate images from css-doodle source code. If you're familiar with command lines, try installing it with npm:

npm i -g @css-doodle/cli

After that, you'll be able to generate images with one line of command.

cssd render code.css -o result.png

If the code includes animations, you can also generate a video by using the .webm or .mp4 extension for the output filename.

cssd render code.css -o result.webm

Note that this tool is built on Puppeteer and requires FFmpeg to be installed for video generation.

Read more available options here.

For CSS artists

I kept CSS artists in mind since the every beginning of development, so this tool also supports generating images from local HTML files and CodePen links directly.

# from local html file
cssd render index.html

# from CodePen link
cssd render https://codepen.io/yuanchuan/pen/MQEeJo

If you ever need to generate an image for print, you can add the -x option to generate the image in a higher resolution.

# 5x size to the original
cssd render index.html --selector '#graph' -x 5

Preview

In the past, displaying css-doodle required a browser and wrapping the code inside the custom <css-doodle> element.

<css-doodle>
  <!-- code here -->
</css-doodle>

Now with command cssd preview, it will open a window to preview the result with live updates as you edit. The browser becomes invisible.

cssd preview example.css

Thoughts

After coding in the editor without <css-doodle> tags for a while, I realized there's a transition to make css-doodle a small programming language.

It's quite different. Practices once considered effective, such as using short function names, are now seem to be a bad choice. It also lacks a structure to organize and group the code, which would make it more elegant and easier to read.

There's still missing a lot and a long way to go, but I'm excited about the direction it is heading.

GitHub: https://github.com/css-doodle/cli

I like the background() function in P5.js. It accepts one or multiple parameters and is very easy to use. Setting the background color is often one of the first steps when starting a new P5.js sketch.

function setup() {
  background(200);
}

When comes to CSS Doodle, the background color is usually defined within the :doodle block, which indicates that the color is applied directly to the component element.

@grid: 1 / 400px;

:doodle {
  background: #f0f0f0;
}

I thought it would be convenient to have a short command for adding background color, to save time and make the code more concise. So I extended the @grid property to read a second / symbol.

@grid: 1 / 400px / #f0f0f0;

I was happy with this new syntax and never looked back at the old style.

Over the past year, I've gradually added several other shortcut commands for the @grid property. Some of them are visually intuitive -- at least for me.

* 45deg    // rotate
+ 2        // scale
~ 100%     // translate
∆ 1000px   // add perspective
_ 1px      // add grid gap

I chose those symbols based on their visual similarity to the action they represent. For exmaple, the * symbol looks like a spin and points toward to different directions.

Shortcut for hue-rotate()

Yesterday, I found that the hue-rotate() of the filter property is another frequently used function when I want to add color variation to the entire element. To simplify the task, I decided to create a new command for it.

@grid: 1 / 400px;

:doodle {
  filter: hue-rotate(30deg);
}

I explored the characters available on the keyboard and those accessible with the Alt key on my computer, which I had done multiple times before. However, none of them seemed relevant to hue rotation.

!@#$%&*¡™£¢∞§¶•ªº–≠«`œ∑´®†\¨ˆøπ“‘åß∂ƒ©˙∆˚¬…æ¸√∫˜µ≤≥÷≈

I was about to give up, then suddenly realized that the rotate property can accept additional axis values, like this:

rotate: x 10deg;
rotate: y 10deg;
rotate: z 10deg;

So why not resue the existing * command and add a custom h for hue rotation? It's unlikely that CSS will add an axis named h to the rotate property in the future, so there shouldn't be any conflicts with existing CSS keywords.

* 30deg    // rotate: 30deg;
* x 30deg  // rotate: x 30deg;
* h 30deg  // filter: hue-rotate(30deg);

This seemed a proper choice, and best of all, no new symbol to remember.

* h <degree>

Now I can quickly add hue-rotate() to the component element with the command * followed by h and a degree.

@grid: 1x36 / 400px / #f90 +2 *45deg *h @r(±90deg);
@place: center;
@size: 100%;
content: @svg-polygon(
  points: 180;
  move: 0 $(@dy/@Y*2);
  fill: @P(#f90, #00f, pink);
  a: sin((@Y/2-@abs.dy)/6.9)^1.2;
  x: a*cos(t)/(1+sin(2t)^2);
  y: x*sin(3t);
);

In my earlier post Time Uniform For CSS Animation, I took a note about a way to do CSS animations with time ticks instead of keyframes. It was limited applicable because CSS lacked the ability of doing complex Math calculations.

After years of wait, CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions. It's time to revisit the time-based way of animation, hope it'll be more useful this time.

The basic idea

Using time for animation is very common in shader programs and various other places. CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds.

@property --t {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true
}
@keyframes tick {
  from { --t: 0 }
  to   { --t: 86400000 }
}
:root {
  animation: tick 86400000ms linear infinite
}

For each millisecond, the variable --t increments by 1, which is 1000 in one second. There's a trick to show the variable with counter() function.

::after {
  counter-reset: t var(--t);
  content: counter(t);
}

Other values which are based on --t will change along with it. That's how we get the animation effect.

div {
  /* 1 turn per second */
  rotate: calc(var(--t) * .001turn);
}

Controlling frame rate

Maintaining the update frequencey at 60 frames per second (FPS) is sufficient for a smooth animation. Browsers often have optimizations for rendering so there wouldn't be any problem if the frequencey is higher than 60 FPS. But one can manually control the frame rate using step() function if needed.

/* ... */

:root {
  animation: tick;
  animation-duration: 86400000ms;
  animation-iteration-count: infinite;

  /* 8 fps */
  animation-timing-function: step(calc(86400000/(1000/8)));

  /* 24 fps */
  animation-timing-function: step(calc(86400000/(1000/24)));

  /* 60 fps */
  animation-timing-function: step(calc(86400000/(1000/60)));
}

Transform time

The value of --t grows constantly in one direction. It's all right for the angle value that is bigger than 360deg, however, not all CSS properties treat their values as cyclical.

Let's say I want to animate a box from left to right, if the translate offset is associated to the --t it will increase constantly without stop.

translate: calc(var(--t) * .001px);

min()

One expected result is that when the offset reaches at a specific value, it stops immediately. This is how min() function can be useful.

translate: min(270px, calc(var(--t) * .5px));

To precisely control the animation duration we can restrict the value of --t instead.

/* 270px in 3s */
translate: calc(min(3000, var(--t)) * (270px / 3000));

mod()

After the box has moved to the right, another option is to restart the offset from beginning. Now we have mod() function to achieve this.

translate: calc(mod(var(--t)/4, 270) * 1px);

sin()

Or to make the movement back and forth.

translate: calc(sin(mod(var(--t)/135, 270)) * 135px);

Custom easing function

We can create custom easing functions using Math functions and the --t variable, which might not be achievable with cubic-bezier().

ease-out-cubic

The initial step is to bound the value --t between 0 and 1.

/* from 0 to 1 in 1s */
--t01: calc(min(1000, var(--t)) / 1000);

/* 1 - pow(1 - t, 3) */
--ease-out-cubic: calc(
  1 - pow(1 - var(--t01), 3)
);

translate: calc(var(--ease-out-cubic) * 270px);

ease-out-elastic

/* from 0 to 1 in 1s */
--t01: calc(min(1000, var(--t)) / 1000);

/* pow(2, -10t) * sin((10t - .75) * 2/3 * PI) + 1 */
--ease-out-elastic: calc(
  pow(2, -10 * var(--t01)) *
  sin((var(--t01) * 10 - .75) * 2/3 * PI) + 1
);

translate: calc(var(--ease-out-elastic) * 270px);

Experiment with CSS Doodle

As the expressions get complex, var() and calc() tend to make the code less readable. So I've added the @t function for representing variable --t. The latest version of css-doodle also accepts simple Math expressions directly inside arguments.

/* rotate: calc(mod(var(--t) / 1000, 10) * 5deg); */
rotate: @t(/1000, %10, *5deg);

Code is short without writing keyframes.

@grid: 20x1 / 280x 60px;
@gap: 1px;
@size: 100% 20%;
background: #000;
margin: auto;
translate: 0 calc(20px * sin(4*@t(/20, +@i(*6), %360deg)));

And it's quick to experiment new parameters too.

translate: 0 calc(20px * sin(3*@t(/50, *@i(*2), %360deg)));

Function @T and @TS

In addition to the @t function, the uppercase function @T represents another time ticks from beginning of the day. Function @TS is a shorthand for @t(/1000), which tracks time in second.

Here is a clock implemented in css-doodle. (CodePen link)

/* ... */

/* second */
rotate: @TS(*6, %360deg);

/* minute */
rotate: @TS(/60, *6, %360deg);

/* hour */
rotate: @TS(/60, /12, *6, %360deg);

round()

How can we make a jumping motion for the second hand? Of course, the direct approach is to use round() function, where the third parameter specifies the rounding interval. In the context of a clock, each step equals 360 / 60 = 6deg.

rotate: round(down, @TS(*6, %360deg), 6deg);

More examples

Animate colors and positions together. (CodePen link).

@grid: 100x1 / 100% auto (4/3) / #10153e;
@size: @rn(1vmin, 5vmin, 10);
margin: auto;
border-radius: 50%;

background: @p(
  hsl(@t(/10, +@i(*2), %360), 90%, 80%)
);
box-shadow: @m5(
  @r(±23vmin) @r(±23vmin) @r(2vmin) @r(-40px) @p
);
translate: @M2(
  calc(100px * tan(6*cos(@t(/10, +@i(*10), /6, %360deg))))
);

Animate text colors. (CodePen link).

@grid: 32 / 400px / #000 ^.95;
@content: @pn([a-z0-9.]);

--x: abs(@dx/@X);
--y: abs(@dy/@Y);

line-height: 0;
font-size: 12px;
font-family: monospace;
color: hsl($(480x), 100%, calc(tan($x/tan($y*4)*50 - @t(/400))*100%));

Conclusion

I'm excited about this approach. Although using keyframes seems much straightforward, for a demo scene full of math calculations and input variables, using time as a variable is more likely to get diverse results.

2024.05.17 update: Add text color animation demo.

The stroke-dasharray attribute in SVG is more flexible compared to the dashed style in CSS. While there are numerous articles and examples about its usages, including Line animations, Pie charts, Circular progress bars, or even Hamburger menu icons, there's still something new to explore.

Unlike CSS, stroke-dasharray accepts multiple values, which will be picked cyclically according to the stroke length. Imagine it as an infinite repeated value sequence, the odd-numbered positions are dashes, and the even-numbered positions are gaps.

stroke-dasharray: 1 2 1;

/* which means */
stroke-dasharray: 1 2 1 1 2 1 1 2 1 ...

pathLength

The total length of a line stroke or path determines where the dashes end. To precisely control the endpoints, you may want to use the getTotalLength() method to get the exact length with JavaScript.

Manual estimation of path length is possible for relatively simple shapes. Though the actual result may differ between browsers.

You know what?

There's the lesser-known pathLength attribute for manually specifying the length value, browsers will handle the calculations automatically. Sometimes it's convienient to set an arbitrary value and don't rely on JavaScript at all. I first learned it from Amelia Bellamy-Royds in this comment.

svg {
  viewBox: -9 -9 18 18;
  circle {
    r: 8;
    fill: none;
    stroke: #000;
    stroke-dasharray: 1 2 1;
    pathLength: .99;
    animate {
      attributeName: pathLength;
      repeatCount: indefinite;
      values: 1;100;1;
      dur: 20s;
    }
  }
}

But still, each browser performs slightly different for pathLength and Firefox does the best. I guess Chrome has a bug at calculation, that's why .99 was used instead of 1 in the above example.

Nevertheless, it's easy to control the dashes with customized pathLength. Setting the pathLength to 40 in a rect and each side gets 10.

svg {
  viewBox: 0 0 50 50 p .5;
  rect {
    width, height: 50;
    fill: none;
    stroke: #000;
    pathLength: 40;
    stroke-dasharray: 2 8;
    stroke-dashoffset: 1;
  }
}

Interesting Shapes

Some interesing shapes can be made by tweaking stroke-dasharray and its related atrributes.

svg {
  viewBox: 0 0 10 10 p 10;
  rect {
    width, height: 10;
    stroke: #000;
    stroke-dasharray: 2 8;
    stroke-width: 20;
  }
}

Abstract forms.

svg {
  viewBox: 0 0 10 10 p 5;
  rect {
    width, height: 10;
    stroke: #000;
    stroke-dasharray: .079 9.9;
    stroke-width: 10;
  }
}

svg {
  viewBox: 0 0 10 10 p 10;
  rect {
    width, height: 10;
    stroke: #000;
    stroke-dasharray: .1 19 .1 .5 .31 .4;
    stroke-width: 20;
  }
}

Hearts at the corners.

svg {
  viewBox: 0 0 10 10 p 2;
  rect {
    width, height: 10;
    fill: none;
    stroke: #000;
    stroke-linecap: round;
    stroke-dasharray: 4 6;
    stroke-dashoffset: 2;
    stroke-width: 4;
  }
}

If you're using Safari, you might have noticed the top left corner has a rounded appearance. This could be a rendering bug or perhaps a feature.

Zero-sized dashes

When the dash values are set to 0 and the stroke-linecap attribute is set to either square or round, the caps will remain visible as if the dashes are still there.

This is an unique feature which offers some creative usages.

svg {
  viewBox: 0 0 100 100 p 24.5;
  rect {
    width, height: 100;
    fill: none;
    stroke: #000;
    stroke-linecap: square;
    stroke-dasharray: 0 50 50 0;
    stroke-width: 49;
  }
}

Two half round caps will form a full circle.

svg {
  viewBox: 0 0 100 100 p 10;
  rect {
    width, height: 100;
    fill: none;
    stroke: #000;
    stroke-dasharray: 0 10 10;
    stroke-linecap: round;
    stroke-width: 10;
  }
}

svg {
  viewBox: -50 -50 100 100 p 8;
  circle {
    r: 50;
    fill: none;
    stroke: #000;
    pathLength: 96;
    stroke-linecap: round;
    stroke-dasharray: 0 6 0 6 0;
    stroke-width: 16;
  }
}

svg {
  viewBox: -50 -50 100 100 p 7;
  circle {
    r: 50;
    fill: none;
    stroke: #000;
    pathLength: 96;
    stroke-linecap: round;
    stroke-width: 14;
    stroke-dasharray:
      0 6 0 6 0 6 0 0
      6 0 6 0 6 0 6;
  }
}

Generating dots

With sufficiently long path we can generate lots of dots using stroke-dasharray and the round caps.

svg {
  viewBox: -40 -40 80 80;
  style border: 5px solid #000;
  polyline {
    stroke: #000;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0 3;
    points: @m400.@Plot(
      turn: 40; r: t/3;
    );
  }
}

The dots are just caps with dashes length in 0. They're positioned where the path leads, so adjust the path the dots will follow.

/* ... */

points: @m199.@Plot(
  turn: 40; r: t/3;
);

At this point, I genuinely wish SVG gradients could follow along the SVG path so that I can apply different colors to the dots. Currently using mask is the only option to get a similar result.

svg {
  viewBox: -40 -40 80 80;
  style background: #04195a;
  style border: 6px solid #04195a;
  g {
    circle*200 {
      r, cx, cy: @r20 @r(±40) @r(±40);
      fill: @p(crimson, yellow, deepskyblue);
    }
    mask: defs mask {
      polyline {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-dasharray: 0 3;
        points: @m200.Plot(turn: -40; r: t/3)
      }
    }
  }
}

Curvy strokes

After generating different paths using Math equations, adding dashes with stroke-dasharray will result in some peculiar shapes.

svg {
  viewBox: -25 -25 50 50 p 1;
  polyline {
    stroke: #000;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0 5;
    stroke-width: 1.5;
    points: @m200.Plot(
      turn: .37;
      x: 25 * cos(180t);
      y: 25 * sin(180t);
    );
  }
}

I'm not sure if they can be anyting practical. It's just intriguing to see.

/* ... */

stroke-dasharray: 0 10;
points: @m399.Plot(
  turn: .37;
  x: 25 * cos(180t);
  y: 25 * sin(180t);
);

Ornaments

Despite its interesting aspects, I find stroke-dasharray to be very useful in some specific cases.

Here's a symmetrical shape resembling a window lattice, yet the central part seems a little dense.

svg {
  viewBox: -50 -50 100 100;
  style border: 8px solid #000;
  fill: none;
  stroke: #000;
  stroke-width: 1.4;
  g*12 {
    transform: rotate($(360/@N*@n));
    polyline {
      points: @M12.Plot(r: t^4)
    }
    polyline {
      points: @M12.Plot(r: t^4; turn: -1)
    }
  }
}

How can it be improved? One option is to position a circle at the center. Another approach is to modify the lines with stroke-dasharray.

/* ... */

stroke-linecap: round;
stroke-dasharray: 1.5 8.5 100;

There are many options. For example, the one below looks much like a flower in its middle.

/* ... */

stroke-linecap: round;
stroke-dasharray: 0 3 5 2 100;

Using stroke-dasharray not only prevent lines from overlapping but also tend to change the feels based on different patterns.

svg {
  viewBox: 0 0 100 100;
  fill: none;
  style background: #0ce5f2;
  path*30 {
    stroke-linecap: round;
    stroke-dasharray: 0 8 5 6 3 12;
    stroke: @pn(
      #ff4ea5, yellow, @m4(#fff)
    );
    d: M 37 40
       Q @Plot(r: 80) @Plot(r: 150);
  }
}

Text strokes

It's also easy to apply a dashed stroke to the texts in SVG.

However, Safari again has a strange behavior for rendering stroke-dasharray. Maybe that's caused by the length calculation. The pathLength attribute is not available for text strokes so I can't get a consistant result in every browser.

For the same stroke-dasharray value, dashes in Safari are about 5 times more compact than Chrome and Firefox. And when the size of SVG changes its dashes will turn into another shape.

Design with dashes

If the character is complex enough, like 䲜 or 靐, it would contain more dashes, which is something that can be utilized for design.

svg {
  viewBox: 0 0 100 100 p -15;
  style border: 8px solid #000;
  text {
    content: "龘";
    font-size: 120;
    x, y: 50, 90;
    font-family: sans-serif;
    text-anchor: middle;
    fill: none;
    stroke: #000;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 0 6 20;
    stroke-width: 2;
  }
}

The original text becomes hard to recognize after adding dashes. Its meaning fades away, preserving only the shapes.

text {
  /* ... */

  content "M";
  stroke-dasharray: 0 6 0 4 20;
  transform: rotate(90);
}

Another complex character.

text {
  /* ... */

  content: "ﷺ";
  stroke-dasharray: 0 2 9;
}

There are plenteous Unicode characters and different fonts to try. But it's important to note that fonts in different platforms may not look the same. The result is highly dependant on the shape of the text.

If you often use CSS variables (custom properties), you may have found the code referenced by var() looks less shining or readable, particularly combined with calc() functions. Not only because the expression is usually long, the prefixed double hypens -- also diminish the readability.

--a: 3;
--b: 5;
--c: calc(var(--a) * 7 + var(--b) * 4);

In css-doodle, I'm experimenting a way to eliminate all the visual noises while doing calculation to numerical variables.

To avoid conflicts with the native calc() function, I've introduced the symbol $ as a replacement to calc. Variables inside $() do not require the var() or --, just use the variable names directly:

--c: $(a * 7 + b * 7);

Unit

One difference from calc() is that the $() function doesn't support values with units inside it. It returns 0 if the input includes non-numeric variables or values.

--index: 4;

/* 0 */
rotate: $(20deg * index);

Always returning a number is by design. However, if you want to attach a unit to the result, put the unit right behind the symbol $ or at the end of the function.

--index: 4;

/* 80deg */
rotate: $deg(20 * index);

/* 80deg */
rotate: $(20 * index)deg;

Algebraic expression

All the Math functions can be used inside $() function. Multiplication signs are sometimes optional like in Algebraic expressions:

--a: 2;
--b: 3;

/* 95 */
--c: $(7a + b^4);

/* 285.73017356099484 */
--d: $(cos(c) + 3c);

/* 571 */
--e: $(round(2d));

Referencing variables

When making references to variables, prefix the variable names with $, as it is shorter compared to using var().

--r: 20;

svg {
  d: M 0 0 A $r $r 0 0 1 10 10;
}

The symbol $ shares a common analogy in many programming languages, which is why it's been chosen.

Example

I previously shared this code of OpenAI logo at vis.social. Now the readability of the code has improved with the help of $.

svg {
  viewBox: -50 -50 100 100;
  stroke-linecap: round;
  stroke: #000;
  fill: none;

  --x: 14 * cos(π/6) * -1;
  --y: 14 * sin(π/6);

  g*6 {
    transform: rotate(@n(*60));
    path {
      stroke-width: 4.2;
      d: M $(x - 1) $y
         L $(x - 1) $(-3.4y)
    }
    path {
      stroke-width: 6;
      d: M $x $(-3.4y)
         L $(-x) $(-5.4y)
         A 22 22 0 0 1 $(-3.1x) $(-1.4y);
    }
  }
}

https://css-doodle.com/svg/?name=openai+logo