Playful Dividers
Three bright, friendly breaks — a bouncing crayon squiggle, a row of popping shapes, and a dashed cut-here line with scissors.
Playful Dividers the 14th 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-playful-surface">
<p class="div-playful-text">The classroom hamster had escaped again — third time this term — and the search had become, for the children, the most educational event of the week.</p>
<div class="div-playful-v1" role="separator">
<svg viewBox="0 0 476 22" fill="none" aria-hidden="true">
<path class="div-playful-squiggle" d="M0 11 Q24 -3 48 11 Q72 25 96 11 Q120 -3 144 11 Q168 25 192 11 Q216 -3 240 11 Q264 25 288 11 Q312 -3 336 11 Q360 25 384 11 Q408 -3 432 11 Q456 25 476 11" stroke="#ff7a3d" stroke-width="3.5" stroke-linecap="round"/>
</svg>
</div>
<p class="div-playful-text">Every desk had been lifted, every backpack unzipped, and a map of the room drawn on the whiteboard with a hopeful X marked near the radiator.</p>
<div class="div-playful-v2" role="separator">
<span class="div-playful-shapes"><i class="div-playful-c"></i><i class="div-playful-t"></i><i class="div-playful-s"></i><i class="div-playful-t"></i><i class="div-playful-c"></i></span>
</div>
<p class="div-playful-text">He was found, eventually, asleep inside a shoebox lined with cotton wool — a habitat, the children insisted, that he had clearly chosen on purpose.</p>
<div class="div-playful-v3" role="separator"><span class="div-playful-scissors">✂</span></div>
<p class="div-playful-text">A certificate was drawn up, decorated with stickers, and taped above his cage: Most Adventurous Class Pet, awarded by unanimous and very loud vote.</p>
</div> @keyframes div-play-draw { to { stroke-dashoffset: 0; } }
@keyframes div-play-pop { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes div-play-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-play-slide { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-playful-surface {
background: #fff4dc;
padding: 36px 40px;
border-radius: 12px;
}
.div-playful-text {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #4a3a22;
margin: 0;
}
/* v1 — bouncing crayon squiggle */
.div-playful-v1 { margin: 30px 0; }
.div-playful-v1 svg { display: block; width: 100%; height: 22px; overflow: visible; }
.div-playful-squiggle {
stroke-dasharray: 760;
stroke-dashoffset: 760;
animation: div-play-draw 1.1s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — row of popping shapes */
.div-playful-v2 {
display: flex;
align-items: center;
margin: 30px 0;
}
.div-playful-v2::before,
.div-playful-v2::after {
content: '';
flex: 1;
height: 2px;
border-radius: 2px;
background: #ffd089;
animation: div-play-grow 0.6s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-playful-v2::before { transform-origin: right; }
.div-playful-v2::after { transform-origin: left; animation-delay: 0.45s; }
.div-playful-shapes {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
}
.div-playful-shapes i {
display: block;
animation: div-play-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-playful-c { width: 11px; height: 11px; border-radius: 50%; background: #ff7a3d; animation-delay: 0.1s; }
.div-playful-t { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #3db4c4; animation-delay: 0.2s; }
.div-playful-s { width: 12px; height: 12px; background: #ffc23d; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-delay: 0.3s; }
.div-playful-shapes i:nth-child(4) { animation-delay: 0.4s; }
.div-playful-shapes i:nth-child(5) { animation-delay: 0.5s; }
/* v3 — dashed cut-here line with scissors */
.div-playful-v3 {
display: flex;
align-items: center;
gap: 10px;
margin: 30px 0;
}
.div-playful-v3::before,
.div-playful-v3::after {
content: '';
flex: 1;
height: 2px;
background: repeating-linear-gradient(to right, #c4906a 0 7px, transparent 7px 13px);
animation: div-play-grow 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
.div-playful-v3::before { transform-origin: right; }
.div-playful-v3::after { transform-origin: left; animation-delay: 0.24s; }
.div-playful-scissors {
flex-shrink: 0;
font-size: 16px;
color: #c4906a;
animation: div-play-slide 0.5s cubic-bezier(.34,1.56,.64,1) 0.55s both;
}
@media (prefers-reduced-motion: reduce) {
.div-playful-squiggle { animation: none; stroke-dashoffset: 0; }
.div-playful-v2::before, .div-playful-v2::after, .div-playful-shapes i,
.div-playful-v3::before, .div-playful-v3::after, .div-playful-scissors { animation: none; }
}