Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> .checkmark-outline { fill: none; stroke: #eee; stroke-width: 4; } .checkmark-path { fill: none; stroke: limegreen; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawCheckmark 1s ease-out forwards; animation-delay: 0.5s; } @keyframes drawCheckmark { to { stroke-dashoffset: 0; } } </style> <svg width="200" height="200" viewBox="0 0 100 100"> <!-- Status Circle --> <circle cx="50" cy="50" r="40" class="checkmark-outline" /> <!-- Success Checkmark --> <path d="M 35 50 L 45 62 L 70 35" class="checkmark-path" /> </svg>
