The five best design links, every weekday

Category: Svg

All Categories

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

cloudfour.com

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.

yuanchuan.dev

Flip, Invert, and Reverse

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

samuelkraft.com

Fractional SVG stars with CSS

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