Category: Graphics

1. What is a Drop Shadow in SVG? A drop shadow is a soft, dark, offset “shadow” underneath or behind a shape/text/icon — it makes things look like they are lifted off the page...

Drop Shadow 2 XML

This single primitive does almost everything the long method did, but in one single line. It’s exactly why most new SVG filter tutorials, CodePen examples, and professional code now...

SVG Linear Gradients are one of the most beautiful and commonly used ways to fill shapes, text, paths, strokes — anything that accepts a fill or stroke — with a smooth color transition that...

SVG Radial Gradients are the circular / round / spotlight / shiny ball version — the colors spread outward from a central point like ripples in water, or like the glow from a light...

SVG Patterns are one of the most fun and powerful ways to fill shapes (rectangles, circles, paths, text, polygons, etc.) with a repeating tile / texture / wallpaper made of SVG elements — instead...

SVG Transformations are the way you move, rotate, scale, skew (slant), or mirror any SVG element (shapes, groups, text, paths, images, etc.) without changing their original coordinates. It’s like telling the browser: “Take this...

SVG Clipping and Masking These two features — clipping and masking — are among the most powerful tools in SVG for controlling what parts of a shape, image, text, or group are visible and...

SVG Animation means making any part of an SVG (shapes, paths, text, gradients, filters, transforms, strokes, opacity, colors, etc.) move, change, grow, fade, rotate, draw themselves, pulse, bounce, or morph over time — all...

SVG Scripting means adding JavaScript (or in very rare cases VBScript – but we ignore that today) directly inside or connected to SVG so that your SVG graphics become interactive, dynamic, and smart. In...

SVG Examples” usually means people are asking for practical, ready-to-use code snippets that show the most common (and most useful) things you can do with SVG — not just theory. So today I’ll give...