Best of SVG — September 2025

1. 1
   Article

   Hacker News·37w

   Liquid Glass in the Browser: Refraction with CSS and SVG — kube.io

   A comprehensive technical guide to recreating Apple's Liquid Glass UI effect using CSS, SVG displacement maps, and physics-based refraction calculations. Covers the mathematical principles of light refraction through Snell's Law, surface function modeling, displacement vector field generation, and SVG filter implementation. Includes interactive simulations and practical UI component examples like magnifying glass, search box, and music player interfaces. Currently Chrome-only due to SVG backdrop-filter limitations.

   55

   4
2. 2
   Article

   CodePen·34w

   Chris’ Corner: Word Search

   A showcase of creative word search game implementations using web technologies. Features examples including a canvas-based version with interactive line drawing, a pure CSS approach using checkbox selectors, a responsive design that adapts grid size, and colorful aesthetic variations. Demonstrates how simple games can inspire front-end developer experimentation and creativity.

   12
3. 3
   Article

   Frontend Masters·36w

   Replace Your Animated GIFs with SVGs – Frontend Masters Blog

   Animated SVGs can replace heavy animated GIFs with dramatically smaller file sizes while maintaining infinite scalability. The technique involves embedding CSS animations directly within SVG files, which continue to work when loaded via img tags or background-image properties. A zombie accordion example demonstrates 98% file size reduction compared to GIF equivalent. Some media queries work within SVGs, but limitations include no hover effects, no prefers-reduced-motion support, and restricted JavaScript execution.

   12

   1