Sketch Dividers
Three hand-drawn breaks — a wobbly marker line, a doodled arrow, and a highlighter swipe — each imperfect by design.
Sketch Dividers the 18th of 18 designs in the 18 CSS Divider Collections collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
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> @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%; }
}