Arnie via Claude
90 lines
5.3 KiB
HTML
90 lines
5.3 KiB
HTML
<h2>Cross-section of the twisted spine</h2>
|
||
<p class="subtitle">The shape that rotates as it rises — shown end-on, then how twist looks from front</p>
|
||
|
||
<div class="cards">
|
||
|
||
<div class="card" data-choice="ribbon" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
|
||
<!-- end-on -->
|
||
<svg width="60" height="60" viewBox="-30 -30 60 60">
|
||
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
|
||
<ellipse cx="0" cy="0" rx="22" ry="5" fill="#7c3aed" opacity="0.9"/>
|
||
</svg>
|
||
<!-- side view of twist -->
|
||
<svg width="60" height="140" viewBox="-30 -70 60 140">
|
||
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
|
||
<!-- ribbon twisting -->
|
||
<path d="M-20,-60 Q20,-40 20,-20 Q-20,0 -20,20 Q20,40 20,60" fill="none" stroke="#7c3aed" stroke-width="3" stroke-linecap="round"/>
|
||
<path d="M20,-60 Q-20,-40 -20,-20 Q20,0 20,20 Q-20,40 -20,60" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="4,2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Flat Ribbon / Blade</h3>
|
||
<p>Thin wide strip — like a Möbius blade. Very dramatic from the side (wide face) but nearly disappears when viewed edge-on. Strong light/shadow contrast.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="oval" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
|
||
<svg width="60" height="60" viewBox="-30 -30 60 60">
|
||
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
|
||
<ellipse cx="0" cy="0" rx="14" ry="14" fill="#0891b2"/>
|
||
</svg>
|
||
<svg width="60" height="140" viewBox="-30 -70 60 140">
|
||
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
|
||
<!-- round rod — twist is subtle, gentle S curve outline -->
|
||
<path d="M-10,-60 Q12,-30 12,0 Q12,30 -10,60" fill="none" stroke="#0891b2" stroke-width="14" stroke-linecap="round" opacity="0.5"/>
|
||
<path d="M-10,-60 Q12,-30 12,0 Q12,30 -10,60" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Round Rod / Cylinder</h3>
|
||
<p>Circular cross-section spirals around corner axis. Twist is subtle — the silhouette curves gently. Smooth and elegant, easiest to print.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="star" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
|
||
<svg width="60" height="60" viewBox="-30 -30 60 60">
|
||
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
|
||
<polygon points="0,-18 5,-7 17,-7 8,2 12,15 0,8 -12,15 -8,2 -17,-7 -5,-7" fill="#d97706"/>
|
||
</svg>
|
||
<svg width="60" height="140" viewBox="-30 -70 60 140">
|
||
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
|
||
<!-- star cross-section twisting — shows alternating spike silhouette -->
|
||
<path d="M0,-60 Q18,-40 0,-20 Q-18,0 0,20 Q18,40 0,60" fill="none" stroke="#d97706" stroke-width="3"/>
|
||
<line x1="-18" y1="-40" x2="18" y2="-40" stroke="#d97706" stroke-width="1" opacity="0.5"/>
|
||
<line x1="-18" y1="0" x2="18" y2="0" stroke="#d97706" stroke-width="1" opacity="0.5"/>
|
||
<line x1="-18" y1="40" x2="18" y2="40" stroke="#d97706" stroke-width="1" opacity="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Star / Multi-Point</h3>
|
||
<p>3–5 pointed star cross-section. As it twists the spikes create a dynamic rippling silhouette. Most visually complex, high detail on print.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="triangle" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
|
||
<svg width="60" height="60" viewBox="-30 -30 60 60">
|
||
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
|
||
<polygon points="0,-18 18,12 -18,12" fill="#16a34a"/>
|
||
</svg>
|
||
<svg width="60" height="140" viewBox="-30 -70 60 140">
|
||
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
|
||
<!-- triangle twisting: alternating wide/narrow faces -->
|
||
<path d="M-16,-60 Q16,-30 -16,0 Q16,30 -16,60" fill="none" stroke="#16a34a" stroke-width="2.5"/>
|
||
<path d="M16,-60 Q-16,-30 16,0 Q-16,30 16,60" fill="none" stroke="#4ade80" stroke-width="1.5" stroke-dasharray="3,3"/>
|
||
<line x1="-16" y1="-60" x2="16" y2="-60" stroke="#16a34a" stroke-width="2"/>
|
||
<line x1="-16" y1="0" x2="16" y2="0" stroke="#16a34a" stroke-width="2"/>
|
||
<line x1="-16" y1="60" x2="16" y2="60" stroke="#16a34a" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Triangle / Prism</h3>
|
||
<p>3-sided prism twisting. Faces alternate between facing you and turning away — creates a strong angular rhythm as you walk past.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|