A deep dive into using the browser as a generative design tool without external libraries. Covers SVG filter primitives like feTurbulence and feDisplacementMap for noise textures and warping effects, CSS trigonometric functions for math-driven circular layouts, and the @property rule for animating typed custom properties. Includes practical code examples combining these techniques into a generative hero section with animated noise overlays.
Table of contents
SVG filters on any elementfeTurbulence : sculpting noiseAnimating feTurbulencefeDisplacementMap : the warping effectCSS trigonometry for math-driven layouts@property for animated generative valuesCombining everything: a generative hero9 Impressions