Hand-Drawn Border
A pencil sketch of a box with overshooting corners and doubled strokes that boil between three drawings, like hand-drawn animation. Three SVG paths swap on a stepped opacity loop.
Also known as: sketchy border css, hand drawn border css, doodle border animation.
Sketch it out
HTML
<div class="bdr-hand-drawn-border">
<svg class="bdr-hand-drawn-border-svg" viewBox="0 0 150 85" preserveAspectRatio="none" aria-hidden="true">
<path class="bdr-hand-drawn-border-sketch" d="M.8 5.7C33.5 7.2 102.2 5.4 149.1 5.7M145.6-.2C146.8 19.9 143 53.4 145.4 81.9M149.7 81.5C117.2 82.2 36.3 82.2 2.9 81.5M3.9 85.4C5.6 62.2 7.3 20.6 4.6.4M-.1 3.6C41.2 1.5 106.1 5.6 147.5 3.3M144.6 1.8C142.6 30.4 148.4 51 146 82.6M149.6 79.7C117 82.4 59.6 77.8.5 80.3M5.7 82.7C2.1 57.3 6 23.1 4.1.9"/>
<path class="bdr-hand-drawn-border-sketch" d="M1.2 3.9C51.4 1.7 92.2 3.8 149.3 5.1M145.5.4C148.1 25.8 143.6 65.3 144.5 82.4M150.1 80.3C102.1 79.7 36 81.6 3 81.3M4.4 82.3C1.6 52.9 3.7 20.9 3.5.2M2.8 5.8C57.2 4.8 95.8 7.2 149.1 5.3M146.2 1.2C147.7 28.1 144.5 58.5 146.4 82.8M150.2 79.4C117 81.4 39.7 80.7 2.4 81.1M5.1 83C4.9 51.5 5.6 34.6 3.3 1.3"/>
<path class="bdr-hand-drawn-border-sketch" d="M.8 3.7C57.9 4 91.6 1.7 146.6 5M146.8 2.2C143.6 23.1 148.5 59.1 145.1 83.3M149.8 81.5C114.7 78.4 58.2 79.9 1.1 81M4.6 84.8C6.7 52.7 5 25.5 4.2.9M.5 3.9C35.5 5.3 96.9 3.7 146.7 3.8M146.2 1.7C147.5 22.3 146.2 61.2 145.1 82.2M150.5 80C110.8 81.6 60 81.9 1.3 79.7M5.6 82.7C3.1 51.4 3 27.9 4.9.2"/>
</svg>
<span class="bdr-hand-drawn-border-text">Sketch it out</span>
</div>CSS
.bdr-hand-drawn-border {
--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;
border-radius: 0;
}
.bdr-hand-drawn-border-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.bdr-hand-drawn-border-sketch {
fill: none;
stroke: var(--c);
stroke-width: 1.2;
stroke-linecap: round;
opacity: 0;
animation: bdr-hand-drawn-border-boil 0.42s step-end infinite;
}
.bdr-hand-drawn-border-sketch:nth-of-type(2) { animation-delay: -0.28s; }
.bdr-hand-drawn-border-sketch:nth-of-type(3) { animation-delay: -0.14s; }
.bdr-hand-drawn-border-text {
color: var(--c);
font: 700 1.25em "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
animation: bdr-hand-drawn-border-jitter 0.42s step-end infinite;
}
@keyframes bdr-hand-drawn-border-boil {
0% { opacity: 1; }
33.3%, 100% { opacity: 0; }
}
@keyframes bdr-hand-drawn-border-jitter {
0% { transform: rotate(-1.5deg); }
33.3% { transform: rotate(0.5deg) translateY(0.04em); }
66.6% { transform: rotate(-0.5deg) translateX(0.04em); }
}
@media (prefers-reduced-motion: reduce) {
.bdr-hand-drawn-border, .bdr-hand-drawn-border *, .bdr-hand-drawn-border::before, .bdr-hand-drawn-border::after, .bdr-hand-drawn-border *::before, .bdr-hand-drawn-border *::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.