Chapter 29: SVG Examples
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, explaining why each part is there, and giving you the full code so you can immediately play with it.
All examples are self-contained — just copy into an .html file and open in browser.
Example 1 – Modern Loading Spinner (rotating circle + dasharray animation)
Very common UI element — clean, lightweight, no GIF needed.
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>SVG Loading Spinner</title> <style> .spinner { animation: rotate 1.4s linear infinite; transform-origin: center; } @keyframes rotate { 100% { transform: rotate(360deg); } } .dash { animation: dash 1.4s ease-in-out infinite; stroke-dasharray: 90, 150; stroke-dashoffset: -35; } @keyframes dash { 0% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -35; } 100% { stroke-dashoffset: -125; } } </style> </head> <body style="display:flex; justify-content:center; align-items:center; height:100vh; margin:0; background:#f0f2f5;"> <svg width="120" height="120" viewBox="0 0 100 100"> <circle class="spinner dash" cx="50" cy="50" r="40" fill="none" stroke="#2196F3" stroke-width="12" stroke-linecap="round"/> </svg> </body> </html> |
Why it works nicely:
- One <circle> + CSS only
- stroke-dasharray + stroke-dashoffset animation creates the “marching ants” loading feel
- transform: rotate on the whole circle gives continuous spin
- Very small file size, scales perfectly
Example 2 – Interactive Button with hover shine (gradient + transform + shadow)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>SVG Shiny Button</title> <style> .btn { cursor: pointer; transition: all 0.35s ease; } .btn:hover { transform: translateY(-6px) scale(1.08); filter: drop-shadow(0 12px 24px rgba(33,150,243,0.4)); } .shine { opacity: 0; transition: opacity 0.4s ease; } .btn:hover .shine { opacity: 0.7; } </style> </head> <body style="display:flex; justify-content:center; align-items:center; height:100vh; margin:0; background:#f8f9fa;"> <svg width="320" height="100" viewBox="0 0 320 100"> <defs> <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#42A5F5"/> <stop offset="100%" stop-color="#1976D2"/> </linearGradient> <linearGradient id="shineGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="white" stop-opacity="0.9"/> <stop offset="50%" stop-color="white" stop-opacity="0.3"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </linearGradient> </defs> <g class="btn"> <rect x="10" y="10" width="300" height="80" rx="40" fill="url(#grad)" stroke="#1565C0" stroke-width="4"/> <!-- Shine overlay --> <rect x="10" y="10" width="300" height="40" rx="40" fill="url(#shineGrad)" class="shine"/> <text x="160" y="62" font-size="36" font-weight="bold" text-anchor="middle" fill="white" font-family="Arial, sans-serif"> Get Started </text> </g> </svg> </body> </html> |
What we combined:
- Linear gradient fill
- Second gradient for shine overlay
- CSS hover with transform + shadow
- Rounded rect + centered text
- Group <g> to apply hover to everything together
Example 3 – Animated checkmark (stroke drawing + scale bounce)
Very popular success / confirmation animation.
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Animated Checkmark</title> <style> .checkmark { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 0.8s ease forwards; } .circle { stroke-dasharray: 283; stroke-dashoffset: 283; animation: draw 1s ease forwards 0.4s; } @keyframes draw { to { stroke-dashoffset: 0; } } .scale { animation: bounce 0.6s ease-out 1.2s both; } @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } </style> </head> <body style="display:flex; justify-content:center; align-items:center; height:100vh; margin:0; background:#e8f5e9;"> <svg width="180" height="180" viewBox="0 0 100 100"> <circle class="circle" cx="50" cy="50" r="45" fill="none" stroke="#4CAF50" stroke-width="10"/> <polyline class="checkmark" points="25,50 42,67 75,35" fill="none" stroke="#4CAF50" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/> <!-- Optional bounce wrapper --> <g class="scale"> <!-- The checkmark & circle are already inside --> </g> </svg> </body> </html> |
Key techniques:
- Two separate stroke-dash animations (circle first, then checkmark)
- Delayed start using animation-delay
- Final scale bounce using @keyframes
- All pure CSS — no JavaScript needed
Example 4 – Minimalist icon set with hover color change (scripting touch)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Interactive SVG Icons</title> <style> .icon { transition: all 0.3s ease; cursor: pointer; } .icon:hover { transform: scale(1.25); } </style> </head> <body style="display:flex; gap:60px; justify-content:center; align-items:center; height:100vh; margin:0; background:#f5f5f5;"> <svg width="80" height="80" viewBox="0 0 24 24"> <path class="icon" id="home" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="#757575"/> </svg> <svg width="80" height="80" viewBox="0 0 24 24"> <path class="icon" id="search" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#757575"/> </svg> <script> const icons = document.querySelectorAll('.icon'); const colors = ['#F44336', '#2196F3', '#4CAF50', '#FF9800', '#9C27B0']; icons.forEach((icon, index) => { icon.addEventListener('click', () => { const randomColor = colors[Math.floor(Math.random() * colors.length)]; icon.setAttribute('fill', randomColor); }); }); </script> </body> </html> |
What we combined:
- Reusable icon paths
- CSS hover scale
- JavaScript to change fill color randomly on click
- Simple event listener pattern
Final thoughts from your teacher
These four examples show how SVG becomes really powerful when you combine:
- shapes & paths
- gradients & strokes
- CSS transitions / keyframes
- small JavaScript touches
- smart use of groups (<g>) and defs
You now have a good “starter pack” of real SVG mini-projects you can modify, combine, and build upon.
Want to go deeper? Tell me which style you liked most or what you’d like next:
- animated icons pack
- interactive chart example
- SVG + real data (mini dashboard)
- morphing shape animation
- draggable SVG element
- something else…
Paste any of these examples into your editor, play with numbers/colors/speeds, break them, fix them — that’s how you really learn.
I’m here — show me what you create or ask anything! 🚀
