18 CSS Divider Collections 18 / 18
Sketch Dividers
Three hand-drawn breaks — a wobbly marker line, a doodled arrow, and a highlighter swipe — each imperfect by design.
The code
<div class="div-sketch-surface">
<p class="div-sketch-text">The notebook had been with her for nine years and four countries — its cover softened, its spine cracked, every page carrying some half-finished thought.</p>
<div class="div-sketch-v1" role="separator">
<svg viewBox="0 0 476 14" fill="none" preserveAspectRatio="none" aria-hidden="true">
<path class="div-sketch-line" d="M2 8 C40 4 78 11 116 7 C154 3 192 10 230 6 C268 3 306 11 344 7 C382 4 420 10 458 7 C465 6 470 8 474 7" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</div>
<p class="div-sketch-text">She wrote in pencil, always — not from caution but from a belief that ideas should remain provisional, should keep the option of being wrong.</p>
<div class="div-sketch-v2" role="separator">
<svg viewBox="0 0 476 18" fill="none" aria-hidden="true">
<path class="div-sketch-arrow" d="M6 9 C90 5 180 13 270 8 C330 5 390 11 446 9" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
<path class="div-sketch-head" d="M446 9 L434 3 M446 9 L434 15" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</div>
<p class="div-sketch-text">The best pages were the messiest — arrows looping back on themselves, words crossed out and rewritten, a coffee ring framing one stubborn paragraph.</p>
<div class="div-sketch-v3" role="separator"><span class="div-sketch-swipe">section two</span></div>
<p class="div-sketch-text">When the notebook was full she did not buy a matching one. The next was different on purpose — a new object should not pretend to be the old.</p>
</div> <div class="div-sketch-surface">
<p class="div-sketch-text">The notebook had been with her for nine years and four countries — its cover softened, its spine cracked, every page carrying some half-finished thought.</p>
<div class="div-sketch-v1" role="separator">
<svg viewBox="0 0 476 14" fill="none" preserveAspectRatio="none" aria-hidden="true">
<path class="div-sketch-line" d="M2 8 C40 4 78 11 116 7 C154 3 192 10 230 6 C268 3 306 11 344 7 C382 4 420 10 458 7 C465 6 470 8 474 7" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</div>
<p class="div-sketch-text">She wrote in pencil, always — not from caution but from a belief that ideas should remain provisional, should keep the option of being wrong.</p>
<div class="div-sketch-v2" role="separator">
<svg viewBox="0 0 476 18" fill="none" aria-hidden="true">
<path class="div-sketch-arrow" d="M6 9 C90 5 180 13 270 8 C330 5 390 11 446 9" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
<path class="div-sketch-head" d="M446 9 L434 3 M446 9 L434 15" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</div>
<p class="div-sketch-text">The best pages were the messiest — arrows looping back on themselves, words crossed out and rewritten, a coffee ring framing one stubborn paragraph.</p>
<div class="div-sketch-v3" role="separator"><span class="div-sketch-swipe">section two</span></div>
<p class="div-sketch-text">When the notebook was full she did not buy a matching one. The next was different on purpose — a new object should not pretend to be the old.</p>
</div>@keyframes div-sk-draw { to { stroke-dashoffset: 0; } }
@keyframes div-sk-swipe { from { background-size: 0% 62%; } to { background-size: 100% 62%; } }
@keyframes div-sk-fade { from { opacity: 0; } to { opacity: 1; } }
.div-sketch-surface {
background: #faf8f3;
padding: 36px 40px;
border-radius: 12px;
}
.div-sketch-text {
font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
font-size: 14px;
line-height: 1.85;
color: #3a3a3a;
margin: 0;
}
/* v1 — wobbly hand-drawn line */
.div-sketch-v1 { margin: 30px 0; }
.div-sketch-v1 svg { display: block; width: 100%; height: 14px; }
.div-sketch-line {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: div-sk-draw 0.95s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — doodled arrow */
.div-sketch-v2 { margin: 30px 0; }
.div-sketch-v2 svg { display: block; width: 100%; height: 18px; }
.div-sketch-arrow {
stroke-dasharray: 480;
stroke-dashoffset: 480;
animation: div-sk-draw 0.85s cubic-bezier(.16,1,.3,1) both;
}
.div-sketch-head {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: div-sk-draw 0.25s ease 0.82s both;
}
/* v3 — highlighter swipe under a label */
.div-sketch-v3 {
display: flex;
justify-content: center;
margin: 30px 0;
}
.div-sketch-swipe {
font-family: "Comic Sans MS", "Segoe Print", cursive;
font-size: 13px;
color: #3a3a3a;
padding: 2px 10px;
background-image: linear-gradient(rgba(255,221,87,0.85), rgba(255,221,87,0.85));
background-repeat: no-repeat;
background-position: 0 78%;
background-size: 0% 62%;
animation: div-sk-swipe 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
.div-sketch-line, .div-sketch-arrow, .div-sketch-head { animation: none; stroke-dashoffset: 0; }
.div-sketch-swipe { animation: none; background-size: 100% 62%; }
} @keyframes div-sk-draw { to { stroke-dashoffset: 0; } }
@keyframes div-sk-swipe { from { background-size: 0% 62%; } to { background-size: 100% 62%; } }
@keyframes div-sk-fade { from { opacity: 0; } to { opacity: 1; } }
.div-sketch-surface {
background: #faf8f3;
padding: 36px 40px;
border-radius: 12px;
}
.div-sketch-text {
font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
font-size: 14px;
line-height: 1.85;
color: #3a3a3a;
margin: 0;
}
/* v1 — wobbly hand-drawn line */
.div-sketch-v1 { margin: 30px 0; }
.div-sketch-v1 svg { display: block; width: 100%; height: 14px; }
.div-sketch-line {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: div-sk-draw 0.95s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — doodled arrow */
.div-sketch-v2 { margin: 30px 0; }
.div-sketch-v2 svg { display: block; width: 100%; height: 18px; }
.div-sketch-arrow {
stroke-dasharray: 480;
stroke-dashoffset: 480;
animation: div-sk-draw 0.85s cubic-bezier(.16,1,.3,1) both;
}
.div-sketch-head {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: div-sk-draw 0.25s ease 0.82s both;
}
/* v3 — highlighter swipe under a label */
.div-sketch-v3 {
display: flex;
justify-content: center;
margin: 30px 0;
}
.div-sketch-swipe {
font-family: "Comic Sans MS", "Segoe Print", cursive;
font-size: 13px;
color: #3a3a3a;
padding: 2px 10px;
background-image: linear-gradient(rgba(255,221,87,0.85), rgba(255,221,87,0.85));
background-repeat: no-repeat;
background-position: 0 78%;
background-size: 0% 62%;
animation: div-sk-swipe 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
.div-sketch-line, .div-sketch-arrow, .div-sketch-head { animation: none; stroke-dashoffset: 0; }
.div-sketch-swipe { animation: none; background-size: 100% 62%; }
}