There’s a bunch of Houdini Paint API posts and demos that I’ve enjoyed lately. Here’s a small roundup …
Tag Archives: houdini
CSS Houdini Blobs
Tim Broddin — ubernerd and also my tech colleague at VRT Creative Lab — released a very nice Houdini Paint Worklet that draws some smooth blobs. .css-houdini-blobs { –num-blobs: 40; –seed: 4749; –colors: #71a7ee, #7940c1, #f0e891; –min-opacity: 0.1; –max-opacity: 0.5; background: paint(blobs); } Glad to see Tim used css-houdini-circles as a starting point to work …
Alpha Paintlet
Dave Rupert created a little lovely Houdini Paint Worklet that allows you set a background color with an alpha on elements. The Worklet’s code is as simple as this: registerPaint(‘alpha’, class { static get inputProperties() { return [‘–bg-alpha’, ‘–bg-color’] } paint(ctx, size, props) { ctx.globalAlpha = props.get(‘–bg-alpha’); ctx.fillStyle = props.get(‘–bg-color’); ctx.fillRect(0, 0, size.width, size.height); } …
Generative design with CSS Houdini
Recording of George Francis giving his talk “Generative design with CSS Houdini” at the most recent edition of London CSS Learn how the mystical powers of CSS Houdini can be harnessed to create ever-unique, generative user interfaces — think random patterns, shapes, animations, and more! Related: Random Paint Effects with Houdini
Random Paint Effects with Houdini
Speaking of George Francis in the previous post: in the latest episode of HTTP 203 Jake talks Surma through recreating these Houdini-powered “Fleck Patterns” George created before. Generative Houdini Stuff! ✨Create always-unique, responsive, “fleck” patterns — all without leaving your CSS 🎨Pass in a seed value, up to 8 colors of your choice, and a …
Drawing Graphics with the CSS Paint API
Over at Codrops, Georgi Nikolov digs into Houdini’s Paint API and the Properties and Values API along with that. Recommended, as it’s all well explained and easy to follow along. Drawing Graphics with the CSS Paint API → Related: css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles →
Animating Text Underlines
Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results. This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled …
Building Future UIs
The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel …
Simulating Drop Shadows with the CSS Paint API
Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow. See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum (@steve_fulghum) on CodePen. If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial. Simulating …
Continue reading “Simulating Drop Shadows with the CSS Paint API”
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 …
Continue reading “Creating random-but-stable effects with the CSS Paint API”