Creating random-but-stable effects with the CSS Paint API

One of the side-effects when drawing things with a Houdini Paint Worklet and relying on Math.random() in your code, is that your layout might be jumpy.

Check out my CSS Houdini Paint Worklet that draws colorful circles for example: whenever you resize the available space or change one of its properties — or some of the other CSS properties — the circles are being drawn, at random places with random colors.

Sometimes this side-effect is unwanted: say you have a Paint Worklet that draws some random lines underneath an element. If you were to animate the --line-width on hover you don’t want it to draw different lines, but you want to keep the same lines in place, and only adjust their width.

To solve around this, Jake Archibald shows us how to implement mulberry32, which has consistent output no matter how many times you call it:

Computers can’t really do random. Instead, they take some state, and do some hot maths all over it to create a number. Then, they modify that state so the next number seems unrelated to the previous ones. But the truth is they’re 100% related.

If you start with the same initial state, you’ll get the same sequence of random numbers. That’s what we want – something that looks random, but it’s 100% reproducible.

Go check out the demos Jake has built. As per usual these are top-notch, and help explain everything well.

CSS paint API: Being predictably random →

Painting a Selfie Girl, with Math

Today we are painting a girl taking a selfie, with mathematics.

I like how the author, a few minutes into the video, says … none of which is too complicated to be honest … while I’m hardly understanding any of the things that he’s explaining 🥵

You can play with the result over at Shadertoy.

Logical Operations with CSS Variables CSS Custom Properties

Going beyond Binary Conditions for CSS Calculations, Ana Tudor takes it to a whole new level by introducing the logical operations (and, or, nand, nor, not, and xor) to CSS — all built on top of calc()

Very often, while using switch variables, I wish I could perform logical operations on them. We don’t have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function.

Impressive!

Logical Operations with CSS Variables →

☝️ FYI: They’re officially called “CSS Custom Properties”, not “CSS Variables” 😉

CSS attribute value less than / greater than / equals selectors

Yesterday Ana Tudor wondered if should could write CSS selectors using less-than and greater-than logic:

Unfortunately this kind of selectors don’t work (yet). Until then one could use JavaScript to tackling this problem, or use a pure HTML/CSS-based solution.

~

The HTML/CSS solution is a 2-step process/hack:

  1. Inject all the values that the item is not equal to using data-* attributes.
  2. Use the CSS Attribute “Value Contains” Selector (e.g. [attribute~=value]) on those data-* attributes.

1. Injecting extra data-* attributes

Say you have a list of 10 items (from 1 to 10):

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

About the 7th item you can state that it:

  • it equals (eq) 7
  • it is greater than or equals (gte) 1, 2, 3, 4, 5, 6, and 7
  • it is greater than (gt) 1, 2, 3, 4, 5, and 6
  • it is less than or equals (lte) 7, 8, 9, and 10
  • it is less than (lt) 8, 9, and 10

Translated to new data-* attributes, the HTML for this 7th item becomes this:

<li data-val-eq="7"
    data-val-gte="1 2 3 4 5 6 7"
    data-val-gt="1 2 3 4 5 6"
    data-val-lte="10 9 8 7"
    data-val-lt="10 9 8">
7</li>

About all other items you can state the same things. Using a template engine, such as Jade, you can easily script this kind of stuff automatically and eventually end up with this markup:

<ul>
	<li data-val-eq="1" data-val-gte="1" data-val-gt="" data-val-lte="10 9 8 7 6 5 4 3 2 1" data-val-lt="10 9 8 7 6 5 4 3 2">1</li>
	<li data-val-eq="2" data-val-gte="1 2" data-val-gt="1" data-val-lte="10 9 8 7 6 5 4 3 2" data-val-lt="10 9 8 7 6 5 4 3">2</li>
	<li data-val-eq="3" data-val-gte="1 2 3" data-val-gt="1 2" data-val-lte="10 9 8 7 6 5 4 3" data-val-lt="10 9 8 7 6 5 4">3</li>
	<li data-val-eq="4" data-val-gte="1 2 3 4" data-val-gt="1 2 3" data-val-lte="10 9 8 7 6 5 4" data-val-lt="10 9 8 7 6 5">4</li>
	<li data-val-eq="5" data-val-gte="1 2 3 4 5" data-val-gt="1 2 3 4" data-val-lte="10 9 8 7 6 5" data-val-lt="10 9 8 7 6">5</li>
	<li data-val-eq="6" data-val-gte="1 2 3 4 5 6" data-val-gt="1 2 3 4 5" data-val-lte="10 9 8 7 6" data-val-lt="10 9 8 7">6</li>
	<li data-val-eq="7" data-val-gte="1 2 3 4 5 6 7" data-val-gt="1 2 3 4 5 6" data-val-lte="10 9 8 7" data-val-lt="10 9 8">7</li>
	<li data-val-eq="8" data-val-gte="1 2 3 4 5 6 7 8" data-val-gt="1 2 3 4 5 6 7" data-val-lte="10 9 8" data-val-lt="10 9">8</li>
	<li data-val-eq="9" data-val-gte="1 2 3 4 5 6 7 8 9" data-val-gt="1 2 3 4 5 6 7 8" data-val-lte="10 9" data-val-lt="10">9</li>
	<li data-val-eq="10" data-val-gte="1 2 3 4 5 6 7 8 9 10" data-val-gt="1 2 3 4 5 6 7 8 9" data-val-lte="10" data-val-lt="">10</li>
</ul>

2. Using [attribute~=value] selectors

With those extra data-* attributes in place, we can now make good use of [attribute~=value] selectors:

  • Say we want to select all items that are greater than 8. To do so we select all items where [data-val-gt] contains the value 8.
    → In CSS: [data-val-gt~=8].
  • Say we want to select all items that are less than or equal 4. To do so we select all items where [data-val-lte] contains the value 4.
    → In CSS: [data-val-lte~=4].
  • Say we want to select all items that are between 5 and 9. To do so we select all items where [data-val-gt] contains the value 5 and [data-val-lt] contains the value 9.
    → In CSS: [data-val-gt~=5][data-val-lt~=9].

~

Demo

Here’s a demo pen which puts it all together:

See the Pen CSS attribute value less than / greater than / equals by Bramus! (@bramus) on CodePen.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Extracting Looping GIFs From Videos

3y3OI1b

Finding and extracting well-looping segments from a movie requires much attention and patience […] To make things easier I wrote a Python script which automates the task. This post explains the math behind the algorithm and provides a few examples of use.

Fuck yeah, math! Or, as the author states:

Yet another big problem of the Internet era tackled by Mathematics.

An Algorithm to Extract Looping GIFs From Videos →

(via @patrickdebois)