Back to Snippets

Animated Success Checkmark SVG CSS

Delight users after a form submission with an animated success checkmark. We mathematically perfected the SVG stroke properties, so it draws itself flawlessly on the screen with a satisfying pop.

581

#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