Author: web-admin

SVG Filters Introduction! Up until now, we’ve learned how to draw shapes (<rect>, <circle>, <path>…), color them (fill, stroke), add text, markers, links, images, and more. All of that is already super powerful. But...

SVG Blur Effects, which are one of the most popular and easiest-to-understand parts of SVG filters! I’m your friendly teacher here, so we’ll go slow, step by step, with lots of copy-paste examples. By...

Why “Drop Shadow 1”? There are two main ways to make drop shadows in SVG in 2025–2026: Drop Shadow 1 (classic method) → Uses <feGaussianBlur> + <feOffset> + <feMerge> → More steps, but very...

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?...