Category: SVG

Drop Shadow 2 — the modern, simpler way using the single <feDropShadow> primitive. This is the method most people recommend in 2025–2026 for new projects because it’s shorter, easier to read, and feels more...

SVG: Linear Gradients! Imagine we’re sitting together with the code editor open, and I’m your patient teacher who’s going to explain everything about <linearGradient> step by step — slowly, clearly, with lots of copy-paste...

SVG Radial Gradients Imagine we’re sitting together again, code editor open, and I’m going to walk you through this very slowly and clearly, just like before — with plenty of copy-paste examples you can...

What is an SVG Pattern really? A pattern is a small piece of SVG artwork (a “tile”) that gets repeated infinitely in both directions (like tiles on a bathroom floor) to fill a shape....

SVG: Transformations! Imagine we’re sitting together with the code editor open, and I’m your patient teacher who’s going to explain everything about SVG transformations step by step — slowly, clearly, with lots of copy-paste...

SVG: Clipping and Masking! These two techniques let you hide parts of shapes, text, images, or groups in very creative ways — basically, they are SVG’s version of “cookie cutters” and “photo masks” (like...

SVG Animation I’m going to explain it like we’re sitting together building moving graphics step by step — slowly, clearly, with many copy-paste examples you can run immediately. What does “SVG Animation” actually mean?...

SVG Scripting, one of the most powerful (and sometimes intimidating) ways to make SVG graphics truly interactive and dynamic. Imagine I’m your patient web-development teacher sitting right next to you with the code editor...

SVG examples — complete, ready-to-copy mini projects that show how these pieces combine in actual useful (and beautiful) graphics. I’m going to act like your patient teacher showing you finished drawings on the board,...

SVG Quiz  We’ve spent a lot of time together learning almost every important piece of SVG: basic shapes (rect, circle, ellipse, line, polyline, polygon, path) text (<text>, <tspan>, <textPath>) fill, stroke, gradients (linear &...