Hacker News·1yJavaScript Animation Engine
Anime.js is a versatile JavaScript animation library offering several features, including rotating objects, creating motion paths, and animating SVG paths. Users can create timelines, apply staggered animations, and make elements draggable with customizable easing options. The library also supports advanced configurations like spring physics and media query-based animations.
WebDev·39wStatic is boring — animate your icons 🎯
AnimateIcons is a React library that transforms static SVG icons into smooth animations. It offers 45+ animated icons, works with React and Next.js, supports hover and programmatic control, and integrates with ShadCN CLI. The library aims to enhance user interfaces by adding purposeful motion to icons.
developedbyed·1yThe Power of SVG Animations
Learn how to enhance your SVG animation skills by creating a dynamic sun-to-moon toggle with glowing effects using a single SVG. The guide covers integrating this effect from scratch using React and Figma, optimizing SVG path attributes, and adding staggered animations with motion.react. The tutorial provides step-by-step instructions and code snippets to make the task approachable and fun.
Dev Tools·39wStatic is boring — animate your icons 🎯
AnimateIcons is a React library that transforms static SVG icons into smooth animations. It offers 45+ animated icons, works with React and Next.js, supports hover and programmatic control, and integrates with ShadCN CLI. The library aims to enhance user interfaces by adding purposeful motion to icons.
Hacker News·46wSVGs that feel like GIFs
SVG animations can replace GIFs for terminal recordings, offering smaller file sizes and higher resolution. Using asciinema to record terminal sessions and svg-term-cli to convert them creates animated SVGs that work in GitHub README files. SVG animations leverage built-in elements like <animate>, <animateTransform>, and <animateMotion> from the SVG specification.
Frontend Masters·43wLiquid Glass on the Web – Frontend Masters Blog
Apple's new Liquid Glass design aesthetic for version 26 operating systems creates complex visual effects with light refraction, distortion, and frosted glass appearances. Web developers are recreating this look using CSS backdrop-filter, SVG filters like feDisplacementMap and feGaussianBlur, and React components. The technique involves multiple parameters including displacement scale, blur amount, saturation, and aberration intensity. However, implementing liquid glass effects raises significant text contrast accessibility concerns that developers must carefully address when placing text over unknown backgrounds.
Josh W Comeau·44wA Friendly Introduction to SVG • Josh W. Comeau
SVG (Scalable Vector Graphics) is a powerful web technology that allows developers to create scalable, interactive graphics using XML syntax. Unlike traditional image formats, inline SVGs can be styled with CSS and manipulated with JavaScript as first-class DOM citizens. The tutorial covers basic SVG shapes (circles, rectangles, polygons), the viewBox attribute for scalability, and advanced stroke animations including dash patterns and drawing effects. Key concepts include using presentational attributes, creating smooth transitions, and leveraging stroke-dasharray and stroke-dashoffset for dynamic visual effects.
Ars Technica·41wAdult sites are stashing exploit code inside racy .svg files
Adult websites are exploiting SVG image files to embed malicious JavaScript code that automatically generates Facebook likes when users click on the images. Unlike traditional image formats, SVG files can contain executable code, making them vulnerable to attacks like cross-site scripting and clickjacking. The malicious code is heavily obfuscated using techniques like JSFuck to avoid detection, allowing these sites to artificially boost their social media engagement through unwitting user interactions.
Community Picks·50wiro.js
iro.js is a JavaScript color picker widget that provides an SVG-based interface for selecting colors. It supports multiple color formats (hex, RGB, HSV, HSL, and kelvin temperatures) through a unified API, allows multiple colors for harmony selection, and requires no external dependencies. The library can be installed via NPM, CDN, or direct download, and offers customizable options, event handling, and easy integration with modern frameworks.
Community Picks·1yFree and open-source SVG illustrations
Flowbite Illustrations offers 54 free and open-source SVG illustrations compatible with Flowbite and Tailwind CSS. Customize colors easily and access support for SVG, PNG formats, and a Figma file. The illustrations can be used in personal and commercial projects with proper credits, and they are suitable for various front-end frameworks.
Community Picks·47wLiquid Glass, but in CSS
A detailed technical breakdown of recreating Apple's new Liquid Glass design language using CSS and SVG filters. The implementation involves multiple layers including specular highlights with box-shadow, backdrop blur and color filters, SVG displacement maps for refraction effects, and chromatic aberration simulation. The technique requires advanced CSS filter knowledge and has significant browser compatibility limitations, working primarily in Chrome with performance considerations for GPU usage.
CSS-Tricks·1yRevisiting Image Maps
The post explores the use of image maps, an older web design tool, and discusses their advantages, challenges, and alternatives. It highlights a project for Mike Worth that required blending expressive '90s design with modern techniques. While discovering image maps weren't the right fit, the effort led to finding modern solutions by leveraging SVG and anchoring paths for clickable areas, emphasizing accessibility and responsiveness.
Blogging and all that Malarkey·21wA new gold mine graphic animation
A designer shares their process of creating an animated gold mine graphic for a contact page, replacing an earlier version they disliked. The workflow involved pencil sketching, creating vectors in Sketch, then implementing CSS animations for swaying buckets and swinging lamps, plus vanilla JavaScript for dust particles and gold shimmers. The graphic features pioneer characters positioned at a mine entrance with atmospheric effects.
Codrops·1yFrom SplitText to MorphSVG: 5 Creative Demos Using Free GSAP Plugins
The post explores the creative potential of GSAP's newly free premium plugins through five animation demos. It provides step-by-step guides for using plugins like SplitText, MorphSVG, Inertia, DrawSVG, and Physics2D to create interactive and animated web effects, such as text smashing and glowing dot grids. These examples highlight how GSAP can enhance web design and add playful elements to user interfaces. Resources are available for further exploration on CodePen and Webflow.
Web Tools Weekly·1yJS Utilities, SVG, Audio, React Tools
Explore a collection of JavaScript utilities, media tools, and React tools designed to enhance productivity and functionality in web development. Highlights include a syntax highlighter for text streams, an SVG illustration collection, an online QR code generator, Node.js bindings for the Web Audio API, and various React components for managing JSON data, handling state, and improving user interaction.
Astro·26wAstro 5.16
Astro 5.16 introduces experimental SVG optimization using SVGO to reduce file sizes during builds, adds interactive keyboard shortcuts to the preview server (similar to the dev server), and improves AI agent compatibility with a --yes flag for automated integration setup. The release also includes an ActionInputSchema utility type for better type safety in actions and reduces the Netlify adapter's dependency footprint by 82 MB through updated dependencies.
Josh W Comeau·1yA Million Little Secrets • Josh W. Comeau
Josh W. Comeau shares insights into the intricate details and development process behind the landing page for his upcoming interactive online course 'Whimsical Animations'. The post covers animation techniques using web technologies like CSS, JavaScript, and SVGs, and discusses the use of sprites for performance optimization, the application of polar coordinates for particle effects, and adding sound effects for an enhanced user experience.
CyberVerse·38wStatic is boring — animate your icons 🎯
AnimateIcons is a React library that transforms static SVG icons into smooth animations. It offers 130+ animated icons, works with React and Next.js, supports hover and programmatic control, and integrates with ShadCN CLI. The library is lightweight, customizable, and built with motion/react for creating more engaging user interfaces.
Community Picks·49wObra Icons
Obra Icons is a comprehensive icon library featuring over 1,000 simple and consistent icons designed specifically for user interfaces. The collection includes a wide variety of categories from basic UI elements (arrows, buttons, navigation) to specialized icons for business, technology, entertainment, and everyday objects. Each icon follows a consistent design language making them suitable for cohesive interface design across web and mobile applications.
Hacker News·52wSVG animation software
Expressive Animator is a professional SVG animation editor designed for creating stunning animations easily. It offers features like keyframe-based animations, motion paths, and easing editors, and allows import from Figma, PDF, and Adobe Illustrator. Users can export their animations in multiple formats including SVG, Lottie, GIF, and video. The software supports Windows and macOS with a single payment for a lifetime license.
Josh W Comeau·40wAn Interactive Guide to SVG Paths • Josh W. Comeau
SVG path elements enable creation of complex curved shapes through a series of drawing commands. The guide covers essential commands including Move (M), Line (L), quadratic (Q) and cubic (C) Bézier curves, and elliptical arcs (A). Special focus is given to understanding arc parameters like radius, rotation, and sweep flags. Additional features include path closing (Z), relative positioning with lowercase commands, and smooth curve chaining with T and S commands.
selfh.st·1yCustom Colors Are Now Available For selfh.st/icons
Selfh.st/icons now allows users to apply custom colors to icons using a self-hosted proxy server. This new feature enables color customization by overriding CSS styles in SVG files embedded on webpages, overcoming limitations of previous integrations with <img> tags. Users can deploy a Docker container to host their own proxy server, which adds color parameters to icons based on URL specifications.
