Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<style> .spin { animation: rotate 2s linear infinite; transform-origin: 50px 50px; } @keyframes rotate { to { transform: rotate(360deg); } } .pulse { animation: beat 1s ease-in-out infinite; } @keyframes beat { 0%,100% { r: 30; } 50% { r: 38; } } </style> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <rect class="spin" x="20" y="20" width="60" height="60" rx="5" fill="none" stroke="steelblue" stroke-width="4" stroke-dasharray="20 10"/> </svg>
Result
Open