Back to Snippets

Animated Success Checkmark SVG CSS

A confirmation panel where the circle draws itself, the tick draws in after it, then the heading and message fade up below. It all runs on load with no JavaScript.

The drawing effect is the stroke-dasharray trick. Each stroke gets a dash the same length as the path and an equal dashoffset, which hides it completely, then the animation pulls that offset to zero and the line appears to draw. The circle uses 252, which is its circumference at radius 40 rounded up.

Sequencing is done entirely with delays. Each animation shorthand carries two time values, duration first and delay second, which is how the circle waits 0.2s, the tick 0.7s, then the text 1s and 1.2s. Shifting one step means shifting the ones after it too. If you swap the tick for a different path, measure it with getTotalLength and feed that number to both the dasharray and the dashoffset.

774

#css

#svg

#checkmark

#success

#animation

#line drawing

#form

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.success-wrapper {
  background: #ffffff;
  padding: 50px;
  border-radius: 24px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.icon-wrap {
  margin-bottom: 20px;
  transform: scale(0);
  animation: pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1.3) forwards;
}

@keyframes pop-in {
  0% { transform: scale(0); }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.success-circle {
  stroke-dasharray: 252;
  stroke-dashoffset: 252;
  animation: draw-circle 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

/* Mathematical exact length of the checkmark path */
.success-check {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw-check 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}

@keyframes draw-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

.success-wrapper h2 {
  margin: 0 0 10px 0;
  color: #0f172a;
  font-size: 1.75rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up 0.5s ease 1s forwards;
}

.success-wrapper p {
  color: #64748b;
  margin: 0;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up 0.5s ease 1.2s forwards;
}

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

Animated Success Checkmark SVG CSS

Share Code Snippet