Organic Dividers
Three nature-drawn breaks — SVG waves that draw stroke by stroke, leaf pods that spring open, and a scallop edge that fills as its outline traces.
Organic Dividers the 4th 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-organic-surface">
<p class="div-organic-text">In the understory of the beech forest, an entire civilization of fungi connects root system to root system.</p>
<div class="div-organic-v1" role="separator">
<svg viewBox="0 0 476 28" fill="none" preserveAspectRatio="none" aria-hidden="true">
<path class="div-organic-w1" d="M0 14 C29 6 59 6 89 14 C119 22 149 22 179 14 C209 6 238 6 268 14 C298 22 328 22 358 14 C388 6 418 6 447 14 C461 18 469 20 476 14" stroke="#7a9070" stroke-width="1.5"/>
<path class="div-organic-w2" d="M0 20 C29 12 59 12 89 20 C119 28 149 28 179 20 C209 12 238 12 268 20 C298 28 328 28 358 20 C388 12 418 12 447 20 C461 24 469 25 476 20" stroke="#9aaa88" stroke-width=".7" opacity=".5"/>
</svg>
</div>
<p class="div-organic-text">Rain arrives not as individual drops but as a shift in atmospheric attention — the trees lean, the birds fall silent.</p>
<div class="div-organic-v2" role="separator">
<span class="div-organic-pods"><i></i><i></i><i></i></span>
</div>
<p class="div-organic-text">Seeds travel improbable distances — a dandelion's parachute can carry its cargo fourteen kilometres.</p>
<div class="div-organic-v3" role="separator">
<svg viewBox="0 0 476 18" fill="none" preserveAspectRatio="none" aria-hidden="true">
<path class="div-organic-sf" d="M0 18 Q11.9 8 23.8 18 Q35.7 8 47.6 18 Q59.5 8 71.4 18 Q83.3 8 95.2 18 Q107.1 8 119 18 Q130.9 8 142.8 18 Q154.7 8 166.6 18 Q178.5 8 190.4 18 Q202.3 8 214.2 18 Q226.1 8 238 18 Q249.9 8 261.8 18 Q273.7 8 285.6 18 Q297.5 8 309.4 18 Q321.3 8 333.2 18 Q345.1 8 357 18 Q368.9 8 380.8 18 Q392.7 8 404.6 18 Q416.5 8 428.4 18 Q440.3 8 452.2 18 Q464.1 8 476 18" fill="rgba(122,144,112,0.16)"/>
<path class="div-organic-ss" d="M0 18 Q11.9 8 23.8 18 Q35.7 8 47.6 18 Q59.5 8 71.4 18 Q83.3 8 95.2 18 Q107.1 8 119 18 Q130.9 8 142.8 18 Q154.7 8 166.6 18 Q178.5 8 190.4 18 Q202.3 8 214.2 18 Q226.1 8 238 18 Q249.9 8 261.8 18 Q273.7 8 285.6 18 Q297.5 8 309.4 18 Q321.3 8 333.2 18 Q345.1 8 357 18 Q368.9 8 380.8 18 Q392.7 8 404.6 18 Q416.5 8 428.4 18 Q440.3 8 452.2 18 Q464.1 8 476 18" stroke="#7a9070" stroke-width="1"/>
</svg>
</div>
<p class="div-organic-text">The forest is not silent — it is thinking at a frequency we have not learned to hear.</p>
</div> @keyframes div-org-draw { to { stroke-dashoffset: 0; } }
@keyframes div-org-leaf { from { transform: rotate(45deg) scale(0); } 70% { transform: rotate(45deg) scale(1.2); } to { transform: rotate(45deg) scale(1); } }
@keyframes div-org-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-org-fadein { to { opacity: 1; } }
.div-organic-surface {
background: #eaede6;
padding: 36px 40px;
border-radius: 12px;
}
.div-organic-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.88;
color: #3d4438;
margin: 0;
}
/* v1 — dual SVG waves draw in */
.div-organic-v1 { margin: 32px 0; }
.div-organic-v1 svg { display: block; width: 100%; height: 28px; }
.div-organic-w1,
.div-organic-w2 {
stroke-dasharray: 1350;
stroke-dashoffset: 1350;
animation: div-org-draw 1.4s cubic-bezier(.16,1,.3,1) both;
}
.div-organic-w2 { animation-delay: 0.16s; }
/* v2 — rotated leaf pods spring open */
.div-organic-v2 {
display: flex;
align-items: center;
margin: 32px 0;
}
.div-organic-v2::before,
.div-organic-v2::after {
content: '';
flex: 1;
height: 0.5px;
background: #7a8c70;
animation: div-org-grow 0.8s cubic-bezier(.16,1,.3,1) 0.48s both;
}
.div-organic-v2::before { transform-origin: right; }
.div-organic-v2::after { transform-origin: left; animation-delay: 0.53s; }
.div-organic-pods {
display: flex;
align-items: center;
padding: 0 16px;
}
.div-organic-pods i {
display: block;
border-radius: 50% 0;
animation: div-org-leaf 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-organic-pods i:nth-child(1) { width: 7px; height: 7px; background: rgba(106,140,96,.55); animation-delay: 0.17s; }
.div-organic-pods i:nth-child(2) { width: 10px; height: 10px; margin: 0 5px; background: #4a7040; animation-delay: 0.07s; }
.div-organic-pods i:nth-child(3) { width: 7px; height: 7px; background: rgba(106,140,96,.55); animation-delay: 0.25s; }
/* v3 — scallop outline traces, fill fades in */
.div-organic-v3 { margin: 32px 0; }
.div-organic-v3 svg { display: block; width: 100%; height: 18px; }
.div-organic-sf {
opacity: 0;
animation: div-org-fadein 0.65s ease 0.95s both;
}
.div-organic-ss {
stroke-dasharray: 1300;
stroke-dashoffset: 1300;
animation: div-org-draw 1.25s cubic-bezier(.16,1,.3,1) 0.14s both;
}
@media (prefers-reduced-motion: reduce) {
.div-organic-w1, .div-organic-w2, .div-organic-ss { animation: none; stroke-dashoffset: 0; }
.div-organic-sf { animation: none; opacity: 1; }
.div-organic-v2::before, .div-organic-v2::after, .div-organic-pods i { animation: none; }
.div-organic-pods i { transform: rotate(45deg); }
}