Arnie via Claude
83 lines
4.9 KiB
HTML
83 lines
4.9 KiB
HTML
<h2>Twist rate + protrusion depth</h2>
|
|
<p class="subtitle">Per 25cm piece — front view. Ribbon is ~5cm wide, ~4mm thick. Corner is the left edge.</p>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card" data-choice="half-shallow" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
|
|
<svg width="130" height="180" viewBox="0 0 130 180">
|
|
<!-- wall corner -->
|
|
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
|
|
<!-- ribbon: 180° twist, protrudes ~4cm -->
|
|
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">180° / 4cm out</text>
|
|
<!-- front edge of ribbon -->
|
|
<path d="M15,20 Q55,50 15,90 Q55,130 15,160" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
|
|
<!-- back edge -->
|
|
<path d="M15,20 Q25,50 15,90 Q25,130 15,160" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
|
|
<!-- protrusion depth arrow -->
|
|
<line x1="15" y1="50" x2="55" y2="50" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
|
|
<text x="58" y="53" fill="#555" font-size="8">4cm</text>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Gentle — 180° / 4cm</h3>
|
|
<p>One half-turn per piece. Subtle reach. Elegant, understated. Good if it sits close to the corner.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="full-medium" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
|
|
<svg width="130" height="180" viewBox="0 0 130 180">
|
|
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
|
|
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">360° / 8cm out</text>
|
|
<!-- full twist, medium protrusion -->
|
|
<path d="M15,20 Q75,40 75,55 Q75,70 15,90 Q75,110 75,125 Q75,140 15,160" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
|
|
<path d="M15,20 Q20,40 20,55 Q20,70 15,90 Q20,110 20,125 Q20,140 15,160" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
|
|
<line x1="15" y1="45" x2="75" y2="45" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
|
|
<text x="78" y="48" fill="#555" font-size="8">8cm</text>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Balanced — 360° / 8cm</h3>
|
|
<p>One full turn per piece. Confident reach into the room. You clearly see the twist from any angle.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="full-deep" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
|
|
<svg width="130" height="180" viewBox="0 0 130 180">
|
|
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
|
|
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">360° / 14cm out</text>
|
|
<!-- full twist, deep protrusion -->
|
|
<path d="M15,20 Q110,38 110,55 Q110,72 15,90 Q110,108 110,125 Q110,142 15,160" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
|
|
<path d="M15,20 Q22,38 22,55 Q22,72 15,90 Q22,108 22,125 Q22,142 15,160" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
|
|
<line x1="15" y1="42" x2="110" y2="42" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
|
|
<text x="95" y="38" fill="#555" font-size="8">14cm</text>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Bold — 360° / 14cm</h3>
|
|
<p>One full turn, reaches deep into room. Real sculptural presence. Dominant in the space.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="double-deep" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
|
|
<svg width="130" height="180" viewBox="0 0 130 180">
|
|
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
|
|
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">720° / 14cm out</text>
|
|
<!-- double twist, deep -->
|
|
<path d="M15,20 Q110,30 110,42 Q110,55 15,65 Q110,75 110,87 Q110,100 15,110 Q110,120 110,132 Q110,145 15,155" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
|
|
<path d="M15,20 Q20,30 20,42 Q20,55 15,65 Q20,75 20,87 Q20,100 15,110 Q20,120 20,132 Q20,145 15,155" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
|
|
<line x1="15" y1="35" x2="110" y2="35" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
|
|
<text x="95" y="31" fill="#555" font-size="8">14cm</text>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Intense — 720° / 14cm</h3>
|
|
<p>Two full turns per piece. Rapid tight twisting with bold reach. Very dynamic — almost turbulent energy.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|