Toggle navigation
☰
HTML
CSS
Scripting
Database
<html> <head> <style> @keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulsate { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.6; } } .spinner { transform-origin: 85px 85px; animation: spinAround 3s linear infinite; } .pulser { transform-origin: 230px 85px; animation: pulsate 1.5s ease-in-out infinite; } </style> </head> <body> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- A spinning rectangle --> <rect x="50" y="50" width="70" height="70" rx="6" fill="steelblue" class="spinner" /> <!-- A pulsating circle --> <circle cx="230" cy="85" r="40" fill="coral" class="pulser" /> </svg> </body> </html>
