:doodle { @grid: 1x35 / 100% 10rem; } @keyframes slide-in { 0% { transform: translateY(-100%); } 100% { transform: traslateY(0); } } :hover { opacity: 1; } transition: opacity .2s ease-out; animation: slide-in .25s ease-out; opacity: @pick(0.05, 0.1, 0.2, 0.3, 0.4); background: @pick(var(--yellow1), var(--yellow2), var(--yellow3), var(--green1), var(--green2), var(--green3)); height: @rand(15%, 100%); margin: 0 .2rem;

Posts about SVG

Introduction to SVG Filters

SVG filters give us a native and powerful way to apply effects to any of the elements on your pages, not just SVG elements. Let's take a tour in this post.

Text Along a Path on the Web Using SVG textPath

How about some fancy effects on your site where text follows a path, all thanks to some simple SVG markup and the textPath element?

Understanding SVG preserveAspectRatio

Learn how to scale your SVG images using the preserveAspectRatio attribute. You'll learn about the meet and slice values as well as the Min/Max/Mid values.

Understand the SVG Viewbox

Learn how to use the SVG viewBox to scale your vector images and create animations.

Hyperlinks/Anchors Inside SVG Graphics

Make your SVGs clickable by creating hyperlinks with the anchor tag. See how it's done here with a visual example.

Rectangles in SVG: <rect>

A quick snippet to teach you how to define rectangles in SVG.

Polylines in SVG: <polyline>

A quick snippet to teach you how to define polylines in SVG.

Polygons in SVG: <polygon>

A quick snippet to teach you how to define polygons in SVG.

Paths in SVG: <path>

A quick snippet to teach you how to define paths in SVG.

Lines in SVG: <line>

A quick snippet to teach you how to define lines in SVG.

Ellipses in SVG: <ellipse>

A quick snippet to teach you how to define ellipses in SVG.

Circles in SVG: <circle>

A quick snippet to teach you how to define circles in SVG.

Radial Gradients in SVG

A few quick snippets on how to define radial gradients in SVG.

Linear Gradients in SVG

It's easy to define linear gradients in your SVG files. See how it's done with a quick snippet.

SVG Resources

Where to get started with SVG and our curated list of resources.

🕵 Search Results

🔎 Searching...