It’s been a while since I introduced a new syntax to the css-doodle project to solve my own problems.

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

A short tutorial on how to animate SVG paths while smooth scrolling a web page using Lenis and GSAP’s ScrollTrigger plugin.

Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars.

Creating software to reconstruct one-line drawings.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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