Checkmark Draw
An SVG checkmark that draws itself on screen using stroke-dashoffset animation. Perfect for confirming successful form submissions, completed tasks, or any positive acknowledgement state.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
checkmarksvgdrawsuccesscomplete
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
An SVG checkmark that draws itself to confirm successful completion of an action.
CSS
css
.check { width: 64px; height: 64px; }
.check path { fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 0.6s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="check"><svg viewBox="0 0 52 52"><path d="M14 27l8 8 16-18"/></svg></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.check { width: 64px; height: 64px; }
.check path { fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 0.6s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="check"><svg viewBox="0 0 52 52"><path d="M14 27l8 8 16-18"/></svg></div>
</body></html>