The five best design links, every weekday

Category: Svg

All Categories

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!

frontend.horse

Creating Generative SVG Grids

Learn how to create colorful, generative grid designs with JavaScript and SVG!

fffuel.co

Freehand SVG drawing tool

A simple drawing tool that makes it easy to freehand draw SVGs that have a hand-drawn style.

ishadeed.com

Building UI Components With SVG and CSS

Learn how to use SVG and CSS to build UI components.

fffuel.co

SVG generator for melted/spilling/liquid shapes

SVG generator to create melting/spilling shapes and add some fun visual elements to your web designs.

fffuel.co

SVG generator for 3D-like isometric patterns

Generate SVG shape patterns with a 3D feel, thanks to isometric design.

yuanchuan.dev

Polygon Shapes

CSS Doodle provides a declarative syntax for generating polgyon shapes with clip-path property.

fffuel.co

Fluid SVG Gradient Background Generator

An SVG generator to make fluid gradient backgrounds that feel organic. Add a feeling of motion and fluidity to your web designs.

web.dev

SVGcode: a PWA to convert raster images to SVG vector graphics

Convert color or monochrome bitmap images (PNG, JPG, JPEG, WEBP, AVIF, GIF,…) to color or monochrome vector images (SVG).