Importing SVG files as React components with Vite
Learn how to use vite-plugin-svgr to import SVG files as React components in your Vite projects, replacing create-react-app functionality.
Learn how to use vite-plugin-svgr to import SVG files as React components in your Vite projects, replacing create-react-app functionality.
A technical tutorial explaining two methods (SVG animateMotion and CSS offset-path) to animate an object along a moving SVG path, with JavaScript control.
Explores using SVG with CSS to build dynamic UI components like cut-out avatars, highlighting advantages over pure CSS for responsiveness and cross-browser compatibility.
Explains how to use any icon as pure CSS with UnoCSS, covering DataURI generation, scalability, and color customization.
A guide to converting TikZ diagrams to SVG with embedded fonts using knitr and R Markdown for both PDF and HTML outputs.
A curated list of the top 10 free icon packs for developers and designers, detailing features, pros, and cons for each.
A tutorial on creating playful generative SVG characters using JavaScript and SVG.js, inspired by a craft project with a child.
A developer outlines her step-by-step process for creating and animating Scalable Vector Graphics (SVGs), from inspiration to final animation.
A developer's journey implementing dynamic Open Graph images for a blog using the Eleventy Image plugin and SVG.
A guide to creatively styling HTML <hr> elements with CSS and SVG, moving beyond plain lines to add visual flair while maintaining semantics.
A guide to creating a serverless visitor counter badge using Azure Functions, including setup, code, and deployment.
A guide on using SVGR to convert SVG icons into React components, covering both manual CLI and automated Webpack methods.
A developer explores using separate SVG paths for mobile and desktop designs, inspired by Sarah Drasner's work on Netlify's site.
A developer's journey to improve icon usage in web projects, leading to the creation of tools like Icônes and Iconify IntelliSense for better developer experience.
A step-by-step tutorial on building a bar chart from scratch using D3.js, covering core concepts like SVG, scales, and margins.
Explains the core database-like join semantics (Update, Enter, Exit) in D3.js for binding data to DOM elements.
A technical guide on using Eleventy's pagination feature to automatically generate Twitter card images (SVG) for blog posts.
A tutorial on creating custom wavy header designs in React Native apps using the react-native-svg library for scalable vector graphics.
A technical guide explaining SVG path structure and commands to isolate and animate individual elements in a vector graphic using JavaScript.
A CSS tip for selecting SVG elements to ensure they fill width correctly, with a link to a code gist.