Origami Craft Endorsement
Paper folded along six creases, lit from the upper-left. A ribbon hangs beneath. Hover lifts the page to catch the fold angles — the lit facets brighten, the shadowed ones recede.
Origami Craft Endorsement the 6th of 30 designs in the 30 CSS Badges 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="ori-stage">
<div class="ori-badge">
<svg class="ori-medal" viewBox="0 0 220 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<ellipse cx="110" cy="288" rx="68" ry="6" fill="#5a4220" opacity="0.22"/>
<g>
<polygon points="80,190 80,260 110,250 110,200" fill="#3d5a6c"/>
<polygon points="80,260 95,280 110,250" fill="#284252"/>
<polygon points="110,200 110,250 140,260 140,190" fill="#2a4252"/>
<polygon points="140,260 125,280 110,250" fill="#1a3242"/>
</g>
<polygon class="ori-fold ori-fold-light" points="110,30 200,82 110,118" fill="#fbe6b0"/>
<polygon class="ori-fold" points="200,82 192,196 110,118" fill="#e8c878"/>
<polygon class="ori-fold ori-fold-shadow" points="192,196 110,222 110,118" fill="#c8a050"/>
<polygon class="ori-fold ori-fold-shadow" points="110,222 28,196 110,118" fill="#b8923e"/>
<polygon class="ori-fold" points="28,196 20,82 110,118" fill="#dab866"/>
<polygon class="ori-fold ori-fold-light" points="20,82 110,30 110,118" fill="#f4d894"/>
<line x1="110" y1="30" x2="110" y2="222" stroke="#7a5824" stroke-width="0.4" opacity="0.3"/>
<line x1="20" y1="82" x2="200" y2="82" stroke="#7a5824" stroke-width="0.4" opacity="0.25"/>
<line x1="28" y1="196" x2="192" y2="196" stroke="#7a5824" stroke-width="0.4" opacity="0.25"/>
<polygon points="110,30 200,82 192,196 110,222 28,196 20,82" fill="none" stroke="#fae0a0" stroke-width="0.6" opacity="0.5"/>
<circle cx="110" cy="118" r="22" fill="#6a4a20" opacity="0.9"/>
<circle cx="110" cy="118" r="20" fill="none" stroke="#fae0a0" stroke-width="0.6" opacity="0.6"/>
<text x="110" y="127" text-anchor="middle" font-family="Marcellus, Georgia, serif" font-size="22" fill="#fae0a0" font-weight="400">M</text>
</svg>
</div>
<div class="ori-label">
<div class="ori-tier">— Master Class —</div>
<div class="ori-skill">Letterpress & Bindery</div>
<div class="ori-cert">N° 0247 · Awarded May 2026</div>
</div>
</div> .ori-stage {
background: linear-gradient(170deg, #eee8d4 0%, #d8d0b8 100%);
padding: 60px 40px;
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
justify-content: center;
perspective: 1200px;
min-height: 460px;
}
.ori-badge {
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ori-badge:hover {
transform: rotateY(14deg) rotateX(-6deg);
}
@media (prefers-reduced-motion: reduce) {
.ori-badge { transition: none; }
}
.ori-medal {
width: 220px;
height: 300px;
display: block;
filter: drop-shadow(8px 18px 14px rgba(80,60,20,0.25));
}
.ori-medal .ori-fold { transition: filter 0.4s; }
.ori-badge:hover .ori-medal .ori-fold-light { filter: brightness(1.12); }
.ori-badge:hover .ori-medal .ori-fold-shadow { filter: brightness(0.92); }
.ori-label {
text-align: center;
}
.ori-tier {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 9px;
letter-spacing: 0.42em;
color: #6a4a20;
text-transform: uppercase;
margin-bottom: 6px;
}
.ori-skill {
font-family: "Marcellus", Georgia, serif;
font-size: 26px;
color: #3a2814;
line-height: 1;
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.ori-cert {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 9px;
letter-spacing: 0.22em;
color: #8a6630;
text-transform: uppercase;
}