Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> .animated-box { fill: gold; stroke: orange; stroke-width: 5; transition: fill 0.3s ease; animation: rotateBox 4s linear infinite; transform-box: fill-box; transform-origin: center; } .animated-box:hover { fill: skyblue; cursor: pointer; } @keyframes rotateBox { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <svg width="200" height="200" viewBox="0 0 100 100"> <rect x="25" y="25" width="50" height="50" class="animated-box" /> <text x="25" y="90" font-size="8" font-family="sans-serif">Hover the box</text> </svg>
