Fantasy Dividers
Three arcane breaks — a row of runes glowing into life, gold lines that draw toward a diamond sigil, and a wiping chain rule.
Fantasy Dividers the 10th 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-fantasy-surface">
<p class="div-fantasy-text">Before the age of reason came the age of inscription — when words were not merely spoken but carved into stone and oak.</p>
<div class="div-fantasy-v1" role="separator">
<span class="div-fantasy-runes">
<span>ᚠ</span><span>ᚨ</span><span>ᚷ</span><span>ᛁ</span><span>ᛟ</span>
<span class="div-fantasy-rsep">◆</span>
<span>ᛗ</span><span>ᚱ</span><span>ᛞ</span><span>ᛚ</span><span>ᚾ</span>
</span>
<span class="div-fantasy-bar"></span>
</div>
<p class="div-fantasy-text">The tome had been sealed with a wax impression bearing an insignia no living archivist could identify.</p>
<div class="div-fantasy-v2" role="separator">
<svg viewBox="0 0 476 24" fill="none" aria-hidden="true">
<line class="div-fantasy-l div-fantasy-l1" x1="214" y1="12" x2="0" y2="12" stroke="#c4841c" stroke-width="1"/>
<line class="div-fantasy-l div-fantasy-l2" x1="200" y1="8" x2="14" y2="8" stroke="#c4841c" stroke-width=".5" opacity=".35"/>
<polygon class="div-fantasy-sigil" points="238,4 248,12 238,20 228,12" stroke="#c4841c" stroke-width="1.5" fill="#17140e"/>
<line class="div-fantasy-l div-fantasy-r1" x1="262" y1="12" x2="476" y2="12" stroke="#c4841c" stroke-width="1"/>
<line class="div-fantasy-l div-fantasy-r2" x1="276" y1="8" x2="462" y2="8" stroke="#c4841c" stroke-width=".5" opacity=".35"/>
</svg>
</div>
<p class="div-fantasy-text">Every ward the elder cast required a physical anchor — a mark burned into wood, pressed into clay, scratched into the threshold.</p>
<div class="div-fantasy-v3" role="separator">
<span class="div-fantasy-chain">⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓</span>
</div>
<p class="div-fantasy-text">The knight had ridden three days without water before arriving at the garrison well — only to find it sealed with a sigil.</p>
</div> @keyframes div-fan-glow { 0% { opacity: 0; } 35% { opacity: 1; color: #ffe07a; } 100% { opacity: 1; color: #c4841c; } }
@keyframes div-fan-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fan-draw { to { stroke-dashoffset: 0; } }
@keyframes div-fan-sigil { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes div-fan-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
.div-fantasy-surface {
background: #17140e;
padding: 36px 40px;
border-radius: 12px;
}
.div-fantasy-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
line-height: 1.88;
color: #c9ba9a;
margin: 0;
}
/* v1 — runes glow into life */
.div-fantasy-v1 { margin: 32px 0; }
.div-fantasy-runes {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 9px;
}
.div-fantasy-runes > span {
font-family: Georgia, serif;
font-size: 12px;
color: #c4841c;
animation: div-fan-glow 0.5s ease both;
}
.div-fantasy-runes > span:nth-child(1) { animation-delay: 0.05s; }
.div-fantasy-runes > span:nth-child(2) { animation-delay: 0.13s; }
.div-fantasy-runes > span:nth-child(3) { animation-delay: 0.21s; }
.div-fantasy-runes > span:nth-child(4) { animation-delay: 0.29s; }
.div-fantasy-runes > span:nth-child(5) { animation-delay: 0.37s; }
.div-fantasy-runes > span:nth-child(6) { animation-delay: 0.45s; font-size: 7px; }
.div-fantasy-runes > span:nth-child(7) { animation-delay: 0.53s; }
.div-fantasy-runes > span:nth-child(8) { animation-delay: 0.61s; }
.div-fantasy-runes > span:nth-child(9) { animation-delay: 0.69s; }
.div-fantasy-runes > span:nth-child(10) { animation-delay: 0.77s; }
.div-fantasy-runes > span:nth-child(11) { animation-delay: 0.85s; }
.div-fantasy-bar {
display: block;
height: 0.5px;
background: linear-gradient(90deg, transparent, #c4841c 30%, #c4841c 70%, transparent);
transform-origin: center;
animation: div-fan-grow 0.8s cubic-bezier(.16,1,.3,1) 0.9s both;
}
/* v2 — gold lines draw toward a sigil */
.div-fantasy-v2 { margin: 32px 0; }
.div-fantasy-v2 svg { display: block; width: 100%; height: 24px; }
.div-fantasy-l { animation: div-fan-draw 0.9s cubic-bezier(.16,1,.3,1) both; }
.div-fantasy-l1 { stroke-dasharray: 214; stroke-dashoffset: 214; }
.div-fantasy-l2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.09s; }
.div-fantasy-r1 { stroke-dasharray: 214; stroke-dashoffset: 214; animation-delay: 0.04s; }
.div-fantasy-r2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.13s; }
.div-fantasy-sigil {
transform-box: fill-box;
transform-origin: center;
animation: div-fan-sigil 0.52s cubic-bezier(.34,1.56,.64,1) 0.75s both;
}
/* v3 — wiping chain rule */
.div-fantasy-v3 {
margin: 32px 0;
overflow: hidden;
}
.div-fantasy-chain {
display: block;
font-family: "Courier New", monospace;
font-size: 10px;
letter-spacing: 2px;
color: #c4841c;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
animation: div-fan-wipe 0.85s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.div-fantasy-runes > span { animation: none; opacity: 1; }
.div-fantasy-bar, .div-fantasy-sigil, .div-fantasy-chain { animation: none; }
.div-fantasy-l { animation: none; stroke-dashoffset: 0; }
}