## CSS Trigonometric Functions land in Chrome 111

Put your CSS `calc()` hat on because `sin()`, `cos()`, `tan()`, and friends are available in Chrome 111!

## Curves and Surfaces

From fonts to animated movies, curves and surfaces constitute fundamental building blocks of many geometrical designs. We’ll see how complex surfaces are a natural extension of plain two dimensional curves. Throughout this article I’ll keep jumping back and forth between curves and surfaces to highlight how the ideas we develop for wiggly lines can be …

## Conditional Border Radius In CSS

Ahmad Shadeed recently spotted this declaration in Facebook’s CSS: .card { border-radius: max(0px, min(8px, calc((100vw – 4px – 100%) * 9999))); } It’s a really interesting piece of code, which acts as a toggle to only show rounded corners in case the element does not entirely span the viewport width. We don’t want rounded corners …

## 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 …

## 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 …

## How to Land the Space Shuttle … from Space

Highly entertaining and very informative talk by space/NASA-enthousiast Bret Copeland on how to land – the now defunct – Space Shuttle … from Space.

## WTFJS with Math (or why `0.1 + 0.2` results in `0.30000000000000004`)

A few fun little Math-related wtfjs examples. A classic one is adding an empty Array and an empty Object: [] + {} // ‘[object Object]’ {} + [] // 0 If you’re looking for a hint: Coercion. JS WTF with Math →0.30000000000000004.com →

## 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: CSS attribute selector wish:[data-code>2][data-code<19] { /* styles */ }[data-code>=19][data-code<65] { /* other styles */ }and so on… — Ana Tudor (@anatudor) October 12, 2016 Unfortunately this kind of selectors don’t work (yet). Until then one could use JavaScript to tackling …

## Extracting Looping GIFs From Videos

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 …