Mastodon Feed
Reblogged by collinsworth@hachyderm.io ("Josh Collinsworth"):
anatudor ("Ana Tudor 🐯") wrote:
And here are two more pure CSS demos showcasing animated halftone patterns, while the elements they're on either fill the full viewport or are positioned in 3D.
✨ https://codepen.io/thebabydino/pen/gOpMeWv
✨ https://codepen.io/thebabydino/pen/RwQjpmQ#CSS #cssVariables #filter #cssFilter #blending #blendMode #code #coding #frontend #webDev #webDevelopment
Attachments:
- Cube made up of 6 pyramids with missing bases (coinciding with the cube faces). The lateral pyramid faces inside the cube showcase an halftone pattern with a map that's a repeating radial gradient at the common apex of these 6 pyramids. Animating the stop positions of the map creates halftone ripples.
- Scrolling though a bunch of full viewport halftone patterns with varying gradient maps having stop positions animated via CSS custom properties.