Self-Drawing Border
A pen draws the outline around the box, holds, then its tail chases the head away and it starts over. An SVG rect with pathLength 100 turns the dash math into percentages of the perimeter.
Also known as: css border draw animation, svg border draw, border stroke animation.
Draw me a box
HTML
<div class="bdr-border-draw">
<svg class="bdr-border-draw-svg" aria-hidden="true">
<rect class="bdr-border-draw-track" width="100%" height="100%" pathLength="100"/>
<rect class="bdr-border-draw-line" width="100%" height="100%" pathLength="100"/>
<rect class="bdr-border-draw-pen" width="100%" height="100%" pathLength="100"/>
</svg>
Draw me a box
</div>CSS
.bdr-border-draw {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 15em;
height: 8.5em;
border-radius: 1em;
font-family: system-ui, sans-serif;
font-weight: 600;
--t: 4s;
--ease: cubic-bezier(0.65, 0, 0.35, 1);
background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-border-draw-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.bdr-border-draw-svg rect {
rx: 1em;
fill: none;
}
.bdr-border-draw-track {
stroke: color-mix(in srgb, var(--c) 16%, transparent);
stroke-width: 0.14em;
}
.bdr-border-draw-line {
stroke: var(--c);
stroke-width: 0.14em;
stroke-dasharray: 100 100;
animation: bdr-border-draw-line var(--t) var(--ease) infinite;
}
.bdr-border-draw-pen {
stroke: color-mix(in srgb, var(--c) 75%, #fff);
stroke-width: 0.42em;
stroke-linecap: round;
stroke-dasharray: 0 100;
filter: drop-shadow(0 0 0.25em var(--c));
animation: bdr-border-draw-pen var(--t) var(--ease) infinite;
}
@keyframes bdr-border-draw-line {
0% { stroke-dashoffset: 100; }
45%, 58% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -100; }
}
@keyframes bdr-border-draw-pen {
0% { stroke-dashoffset: 0; opacity: 1; }
45% { stroke-dashoffset: -100; opacity: 1; }
50% { opacity: 0; }
53% { opacity: 0; }
58% { stroke-dashoffset: -100; opacity: 1; }
100% { stroke-dashoffset: -200; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-border-draw, .bdr-border-draw *, .bdr-border-draw::before, .bdr-border-draw::after, .bdr-border-draw *::before, .bdr-border-draw *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.