The five best design links, every weekday

Category: Svg

All Categories

smashingmagazine.com

Easy SVG Customization And Animation: A Practical Guide

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

fffuel.co

SSSVG: An Interactive SVG Reference

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

muffinman.io

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 …

fathy.fr

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.

fffuel.co

SVG pixel art pattern maker

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

lucide.dev

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

pepelsbey.dev

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.

vercel.com

Fast, dynamic social card images at the Edge

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

yuanchuan.dev

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.

fffuel.co

lllove: a little tool to make SVG hearts

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

tympanus.net

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.

smashingmagazine.com

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.

schollz.com

One-line drawings

Creating software to reconstruct one-line drawings.

alistairshepherd.uk

SVG generative mountain ridge dividers

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

bjango.com

SVG passthrough precision

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

bjango.com

Ideal SVG exports

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

color-morph.com

Color Morph: SVG and CSS mesh gradient generator

Randomly generate beautiful mesh gradients, export them as an SVG or copy the generated CSS code into your project.

georgefrancis.dev

Texture — Generative Snacks!

Bring your generative work to life with three simple textures inspired by the natural world.

frontend.horse

Gooey Warping SVG Numbers

See how Fabio Ottaviani cleverly uses SVG filters and other SVG tricks to animate this fun countdown!

frontend.horse

Painting SVG Paths with Masks

See how Tom Miller made this beautiful painterly effect with SVG paths, an image mask, and GSAP!