HTML Graphics
Home
Snippets
HTML Graphics
HTML
CSS
JS
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- Outer star --> <polygon points="50,5 61,35 95,35 68,55 79,85 50,65 21,85 32,55 5,35 39,35" fill="#ff4c4c" /> <!-- Inner rotated star --> <polygon points="50,15 58,40 85,40 65,55 73,80 50,65 27,80 35,55 15,40 42,40" fill="#ffd700" transform="rotate(20, 50, 50)" /> <!-- Inner circle --> <circle cx="50" cy="50" r="12" fill="#4cffd7" /> </svg>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); font-family: Arial, sans-serif; } svg { width: 300px; height: 300px; }
//JavaScript
Ad #1
Ad #2
Scroll to Top