The five best design links, every weekday

Category: Svg

All Categories

SVG Viewer

SVG Viewer is an online tool to view, edit and optimize SVGs.

Lissajous Curve SVG Generator

Generate and export SVGs of Lissajous curves. A tool by Eva Decker.

SVG Filter Maker

SVGFM, a node graph builder for SVG filters.

Draw on Scroll

An interesting effect that looks like lines are being drawn down the page as the user scrolls.

Responsive SVGs

Stretch your knowledge of working with SVGs for scalable, responsive experiences.

Making noisy SVGs

Adding noise texture with only code

SVG Tutorial - Learn how to code images in HTML with SVG

Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity.

Figma plugin magic tricks: mixing colors with SVG and Canvas API

We overcame a tough color blending roadblock by ditching the iterative method and shifting into a "declarative" approach with SVG and the Canvas API.

Making SVG Loading Spinners

Learn to create cool SVG loading spinners with this interactive guide.

Changing Colors in an SVG Element Using CSS and JavaScript

Almost everything inside an inline SVG image is up for modification using CSS and JavaScript. Let’s find out how by changing some colors!


A canvas for drawing with isometric cubes.

Fun with stroke-dasharray

The stroke-dasharray attribute in SVG is more flexible compared to the dashed style in CSS.


Convert and optimize SVG icons to React, Vue, and Svelte components

Let’s Make a Rubber Button With HTML, CSS and SVG

While I wasn’t looking, an elastic hover/active effect I shared on CodePen was viewed more than 11,000 times. Here’s how it works!

From static to interactive: turn SVGs into exciting experiences

Bring static content to life. Turn static SVGs into clickable, rich experiences that reveal in-depth insights.

Bézier Curves - and the logic behind them

The logic behind Bézier Curves used in CSS animations and visual elements.

SVG Gradients: Solving Curved Challenges

In the world of programming, seemingly straightforward tasks can unravel into complex challenges.

Coding Randomized Zelda Patterns

The new Zelda game uses repeated patterns to build a cohesive world. Let’s write code to generate these patterns.

Animated SVG Logo

I recently replaced the logo on the top left corner with an animated SVG.

A Deep Dive Into SVG Path Commands

An interactive guide to understanding SVG paths and path commands.