The five best design links, every weekday

Category: Svg

All Categories

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.

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.

Texture — Generative Snacks!

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

Gooey Warping SVG Numbers

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

Painting SVG Paths with Masks

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

Creating Generative SVG Grids

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

Freehand SVG drawing tool

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

Building UI Components With SVG and CSS

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

SVG generator for melted/spilling/liquid shapes

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

SVG generator for 3D-like isometric patterns

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

Polygon Shapes

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

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.

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).

Which SVG technique performs best for way too many icons?

When I started giving talks about SVG back in 2016, I’d occasionally hear a question I never had a great answer for.

Flip, Invert, and Reverse

In this article, I’m going to introduce 3 kinds of transformations for the SVG path commands.

Fractional SVG stars with CSS

Create a rating component with SVG stars that support fractional values.