The five best design links, every weekday

Category: Svg

All Categories

Graph Slider

Moving an element along a given path

How to Draw with SVG Code

A step-by-step guide on how to draw using raw SVG code, complete with interactive diagrams.


A funky SVG shape generator.

Copy-Paste SVG Shapes

Simply click on a shape to copy its SVG code to your clipboard.

Easy SVG Customization And Animation: A Practical Guide

Developers often feel discouraged from editing SVG markup and experimenting with SVG animations,.

SSSVG: An Interactive SVG Reference

Quickly look up how to define SVG shapes, transforms, masks, patterns, gradients, text and more.

Draw SVG rope using JavaScript

This is an interactive article. To fully experience it, you’ll need to turn JavaScript on. Today, I’ll take you through the process I came up with …

Forking Chrome to turn HTML into SVG

I've been working on a program called html2svg, it converts web pages to SVG. It's based on a fork of Chromium to support modern web standards.

SVG pixel art pattern maker

Make pixel art and turn it into repeated SVG patterns that can be used in your designs.

Lucide - Beautiful & consistent icon toolkit made by the community.

Open-source project and a fork of Feather Icons. We're expanding the icon set as much as possible while keeping it nice-looking

SVG Sprites: Old-School, Modern, Unknown, and Forgotten

Let’s try to remember why we needed SVG sprites in the first place, then see what other less-known options are available and how they might be useful.

Fast, dynamic social card images at the Edge

Announcing Vercel OG Image Generation, a new library for generating dynamic social card images.

Experimenting A New Syntax To Write SVG

It’s been a while since I introduced a new syntax to the css-doodle project to solve my own problems.

lllove: a little tool to make SVG hearts

A simple tool to design cute SVG hearts to use anywhere.

How to Animate SVG Shapes on Scroll

A short tutorial on how to animate SVG paths while smooth scrolling a web page using Lenis and GSAP’s ScrollTrigger plugin.

Magical SVG Techniques

Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars.

One-line drawings

Creating software to reconstruct one-line drawings.

SVG generative mountain ridge dividers

Generative mountain ridge dividers using videogame terrain generation techniques, JavaScript and SVG.

SVG passthrough precision

If an SVG is imported into a design tool, then immediately exported as another SVG, how much precision is kept?

Ideal SVG exports

The following article is a random collection of opinions on how design tools should export SVGs.