Paths
Draw And Erase Animation
A stroke that draws itself on, then wipes away.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.draw-erase {
transform: translate3d(140px, 60px, 0);
width: 200px;
height: 200px;
background: #00000000;
stroke-width: 4;
stroke: #8b7bff;
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: draw-erase-anim 2200ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes draw-erase-anim {
0% {
stroke-dashoffset: 100;
animation-timing-function: ease-in-out;
}
50% {
stroke-dashoffset: 0;
animation-timing-function: ease-in-out;
}
100% {
stroke-dashoffset: -100;
}
}
@media (prefers-reduced-motion: reduce) {
.draw-erase {
animation: none;
transition: none;
}
}Why it is built this way
One property does both halves. Running stroke-dashoffset past zero into negative territory pulls the dash off the far end, so the erase needs no second element and no reversed copy.
What it animates
1 property across 1 CSS declaration. The bar shows when each one is moving.
strokeWhat it costs to run
Stroke repaints on every frame rather than running on the compositor. There is no reflow, so this is far cheaper than animating width or height — but keep the painted area modest.
It runs for 2.20s across 3 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a path. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — stroke moves over 2.20s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.