Electric Pulse Ring
Home
Snippets
Electric Pulse Ring
HTML
CSS
JS
<svg viewBox="0 0 300 300"> <circle cx="150" cy="150"></circle> <circle cx="150" cy="150"></circle> <circle cx="150" cy="150"></circle> </svg> <div class="label">ELECTRIC PULSE</div>
body { margin: 0; height: 100vh; background: radial-gradient(circle, #050505, #000); display: grid; place-items: center; overflow: hidden; font-family: system-ui, sans-serif; } svg { width: 300px; height: 300px; } circle { fill: none; stroke: #7cffcb; stroke-width: 3; stroke-dasharray: 6 10; animation: pulse 3s ease-out infinite; filter: drop-shadow(0 0 15px rgba(124,255,203,0.8)); } circle:nth-child(2) { animation-delay: 1s; opacity: 0.6; } circle:nth-child(3) { animation-delay: 2s; opacity: 0.3; } @keyframes pulse { 0% { r: 20; opacity: 1; } 70% { opacity: 0.8; } 100% { r: 140; opacity: 0; } } .label { position: absolute; bottom: 24px; color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 3px; }
// javascript
Ad #1
Ad #2
Scroll to Top