1111 lines
58 KiB
HTML
1111 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Icon Candidates — AI / Cashu / Strudel / Love</title>
|
||
<style>
|
||
body {
|
||
font-family: sans-serif;
|
||
background: #fff;
|
||
margin: 20px;
|
||
}
|
||
h1 { text-align: center; margin-bottom: 10px; }
|
||
h2 { text-align: center; margin-top: 40px; margin-bottom: 16px; color: #000; border-bottom: 1px solid #000; padding-bottom: 8px; }
|
||
.subtitle { text-align: center; color: #000; margin-bottom: 20px; font-size: 13px; }
|
||
.grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
}
|
||
.card {
|
||
border: 2px solid #000;
|
||
border-radius: 20px;
|
||
width: 200px;
|
||
height: 270px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
transition: 0.2s;
|
||
}
|
||
.card:hover {
|
||
border-color: #000;
|
||
background: #eee;
|
||
}
|
||
.card svg {
|
||
width: 140px;
|
||
height: 140px;
|
||
fill: none;
|
||
stroke: #000;
|
||
stroke-width: 1.98;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
.card .label {
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
.card .desc {
|
||
margin-top: 4px;
|
||
font-size: 11px;
|
||
color: #000;
|
||
text-align: center;
|
||
padding: 0 8px;
|
||
}
|
||
body.dark { background: #000; color: #fff; }
|
||
body.dark h2 { color: #fff; border-color: #fff; }
|
||
body.dark .card { background: #000; border-color: #fff; }
|
||
body.dark .card:hover { border-color: #fff; background: #333; }
|
||
body.dark .card svg { stroke: #fff; }
|
||
body.dark .card .label { color: #fff; }
|
||
#toggleTheme {
|
||
position: fixed; top: 10px; right: 10px;
|
||
padding: 6px 14px; border-radius: 8px; border: 1px solid #000;
|
||
cursor: pointer; background: #fff; font-size: 14px; z-index: 10;
|
||
}
|
||
body.dark #toggleTheme { background: #000; color: #fff; border-color: #fff; }
|
||
.inline-code {
|
||
display: none; margin-top: 8px; font-size: 9px; font-family: monospace;
|
||
color: #000; max-width: 180px; word-break: break-all; text-align: left;
|
||
padding: 4px; background: #eee; border-radius: 4px; max-height: 80px; overflow-y: auto;
|
||
}
|
||
body.dark .inline-code { background: #000; color: #fff; }
|
||
.card.show-code .inline-code { display: block; }
|
||
.card.show-code { height: auto; min-height: 270px; }
|
||
|
||
.conway-grid .card svg {
|
||
stroke-width: 1.1;
|
||
}
|
||
.conway-grid .alive {
|
||
fill: currentColor;
|
||
stroke: none;
|
||
}
|
||
.conway-grid .dead {
|
||
fill: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<button id="toggleTheme" onclick="document.body.classList.toggle('dark')">🌓 Theme</button>
|
||
<h1>Icon Candidates</h1>
|
||
<p class="subtitle">Click a card to see its inline SVG code. All icons use viewBox="0 0 10 10", coordinates 2–8, stroke-width 1.98, round caps/joins.</p>
|
||
|
||
<!-- ============================================================
|
||
AI ICONS
|
||
============================================================ -->
|
||
<h2>🤖 AI Icons</h2>
|
||
<div class="grid">
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,3 C3,3 2,4 2,5 C2,6 3,7 4,7 L6,7 C7,7 8,6 8,5 C8,4 7,3 5,3" />
|
||
<line x1="5" y1="3" x2="5" y2="7" />
|
||
<line x1="5" y1="5" x2="3" y2="4" />
|
||
<line x1="5" y1="5" x2="7" y2="4" />
|
||
<line x1="5" y1="5" x2="3" y2="6" />
|
||
<line x1="5" y1="5" x2="7" y2="6" />
|
||
</svg>
|
||
<div class="label">ai-01</div>
|
||
<div class="desc">Brain with dendrites</div>
|
||
<div class="inline-code"><path d="M5,3 C3,3 2,4 2,5 C2,6 3,7 4,7 L6,7 C7,7 8,6 8,5 C8,4 7,3 5,3" /><line x1="5" y1="3" x2="5" y2="7" /><line x1="5" y1="5" x2="3" y2="4" /><line x1="5" y1="5" x2="7" y2="4" /><line x1="5" y1="5" x2="3" y2="6" /><line x1="5" y1="5" x2="7" y2="6" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<line x1="2" y1="3" x2="2" y2="3" />
|
||
<line x1="2" y1="7" x2="2" y2="7" />
|
||
<line x1="5" y1="2" x2="5" y2="2" />
|
||
<line x1="5" y1="5" x2="5" y2="5" />
|
||
<line x1="5" y1="8" x2="5" y2="8" />
|
||
<line x1="8" y1="5" x2="8" y2="5" />
|
||
<line x1="2" y1="3" x2="5" y2="2" />
|
||
<line x1="2" y1="3" x2="5" y2="5" />
|
||
<line x1="2" y1="7" x2="5" y2="5" />
|
||
<line x1="2" y1="7" x2="5" y2="8" />
|
||
<line x1="5" y1="2" x2="8" y2="5" />
|
||
<line x1="5" y1="5" x2="8" y2="5" />
|
||
<line x1="5" y1="8" x2="8" y2="5" />
|
||
</svg>
|
||
<div class="label">ai-02</div>
|
||
<div class="desc">Neural network (3 layers)</div>
|
||
<div class="inline-code"><line x1="2" y1="3" x2="2" y2="3" /><line x1="2" y1="7" x2="2" y2="7" /><line x1="5" y1="2" x2="5" y2="2" /><line x1="5" y1="5" x2="5" y2="5" /><line x1="5" y1="8" x2="5" y2="8" /><line x1="8" y1="5" x2="8" y2="5" /><line x1="2" y1="3" x2="5" y2="2" /><line x1="2" y1="3" x2="5" y2="5" /><line x1="2" y1="7" x2="5" y2="5" /><line x1="2" y1="7" x2="5" y2="8" /><line x1="5" y1="2" x2="8" y2="5" /><line x1="5" y1="5" x2="8" y2="5" /><line x1="5" y1="8" x2="8" y2="5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<line x1="5" y1="2" x2="5" y2="8" />
|
||
<line x1="2" y1="5" x2="8" y2="5" />
|
||
<line x1="3" y1="3" x2="7" y2="7" />
|
||
<line x1="7" y1="3" x2="3" y2="7" />
|
||
</svg>
|
||
<div class="label">ai-03</div>
|
||
<div class="desc">Spark / starburst</div>
|
||
<div class="inline-code"><line x1="5" y1="2" x2="5" y2="8" /><line x1="2" y1="5" x2="8" y2="5" /><line x1="3" y1="3" x2="7" y2="7" /><line x1="7" y1="3" x2="3" y2="7" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')" style="border-color: #f60;">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect x="3" y="4" width="4" height="4" />
|
||
<line x1="4" y1="6" x2="4" y2="6" />
|
||
<line x1="6" y1="6" x2="6" y2="6" />
|
||
<line x1="5" y1="4" x2="5" y2="2" />
|
||
<line x1="5" y1="2" x2="5" y2="2" />
|
||
</svg>
|
||
<div class="label">ai-04 ★</div>
|
||
<div class="desc">Robot head with antenna (SELECTED)</div>
|
||
<div class="inline-code"><rect x="3" y="4" width="4" height="4" /><line x1="4" y1="6" x2="4" y2="6" /><line x1="6" y1="6" x2="6" y2="6" /><line x1="5" y1="4" x2="5" y2="2" /><line x1="5" y1="2" x2="5" y2="2" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,5 C3,3 4,2 5,2 C6,2 7,3 8,5 C7,7 6,8 5,8 C4,8 3,7 2,5 Z" />
|
||
<circle cx="5" cy="5" r="1" />
|
||
</svg>
|
||
<div class="label">ai-05</div>
|
||
<div class="desc">Eye / AI perception</div>
|
||
<div class="inline-code"><path d="M2,5 C3,3 4,2 5,2 C6,2 7,3 8,5 C7,7 6,8 5,8 C4,8 3,7 2,5 Z" /><circle cx="5" cy="5" r="1" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect x="3" y="3" width="4" height="4" />
|
||
<line x1="3" y1="4" x2="2" y2="4" />
|
||
<line x1="3" y1="6" x2="2" y2="6" />
|
||
<line x1="7" y1="4" x2="8" y2="4" />
|
||
<line x1="7" y1="6" x2="8" y2="6" />
|
||
<line x1="4" y1="3" x2="4" y2="2" />
|
||
<line x1="6" y1="3" x2="6" y2="2" />
|
||
<line x1="4" y1="7" x2="4" y2="8" />
|
||
<line x1="6" y1="7" x2="6" y2="8" />
|
||
</svg>
|
||
<div class="label">ai-06</div>
|
||
<div class="desc">Circuit chip / processor</div>
|
||
<div class="inline-code"><rect x="3" y="3" width="4" height="4" /><line x1="3" y1="4" x2="2" y2="4" /><line x1="3" y1="6" x2="2" y2="6" /><line x1="7" y1="4" x2="8" y2="4" /><line x1="7" y1="6" x2="8" y2="6" /><line x1="4" y1="3" x2="4" y2="2" /><line x1="6" y1="3" x2="6" y2="2" /><line x1="4" y1="7" x2="4" y2="8" /><line x1="6" y1="7" x2="6" y2="8" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,3 L8,3 L8,6 L5,6 L3,8 L3,6 L2,6 Z" />
|
||
<line x1="4" y1="4.5" x2="4" y2="4.5" />
|
||
<line x1="5" y1="4.5" x2="5" y2="4.5" />
|
||
<line x1="6" y1="4.5" x2="6" y2="4.5" />
|
||
</svg>
|
||
<div class="label">ai-07</div>
|
||
<div class="desc">Chat bubble (conversational AI)</div>
|
||
<div class="inline-code"><path d="M2,3 L8,3 L8,6 L5,6 L3,8 L3,6 L2,6 Z" /><line x1="4" y1="4.5" x2="4" y2="4.5" /><line x1="5" y1="4.5" x2="5" y2="4.5" /><line x1="6" y1="4.5" x2="6" y2="4.5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M4,7 L4,6 C3,5 2,4 2,3.5 C2,2 3.5,2 5,2 C6.5,2 8,2 8,3.5 C8,4 7,5 6,6 L6,7" />
|
||
<line x1="4" y1="7" x2="6" y2="7" />
|
||
<line x1="4" y1="8" x2="6" y2="8" />
|
||
</svg>
|
||
<div class="label">ai-08</div>
|
||
<div class="desc">Lightbulb / idea</div>
|
||
<div class="inline-code"><path d="M4,7 L4,6 C3,5 2,4 2,3.5 C2,2 3.5,2 5,2 C6.5,2 8,2 8,3.5 C8,4 7,5 6,6 L6,7" /><line x1="4" y1="7" x2="6" y2="7" /><line x1="4" y1="8" x2="6" y2="8" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<line x1="5" y1="5" x2="5" y2="5" />
|
||
<path d="M5,3 C7,3 8,4 8,5 C8,6 7,7 5,7 C3,7 2,6 2,5 C2,4 3,3 5,3" />
|
||
<path d="M3.5,3.5 C3,5 3.5,7 5,7.5 C6.5,8 8,7 7.5,5 C7,3 6,2 5,2.5 C4,3 3.5,3.5 3.5,3.5" />
|
||
<path d="M6.5,3.5 C7,5 6.5,7 5,7.5 C3.5,8 2,7 2.5,5 C3,3 4,2 5,2.5 C6,3 6.5,3.5 6.5,3.5" />
|
||
</svg>
|
||
<div class="label">ai-09</div>
|
||
<div class="desc">Atom / orbiting electrons</div>
|
||
<div class="inline-code"><line x1="5" y1="5" x2="5" y2="5" /><path d="M5,3 C7,3 8,4 8,5 C8,6 7,7 5,7 C3,7 2,6 2,5 C2,4 3,3 5,3" /><path d="M3.5,3.5 ..." /><path d="M6.5,3.5 ..." /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M3,8 L3,6 C2,5 2,3 3,2 L7,2 C8,3 8,5 7,6 L7,8" />
|
||
<circle cx="5" cy="4.5" r="1.5" />
|
||
<line x1="5" y1="3" x2="5" y2="3" />
|
||
<line x1="5" y1="6" x2="5" y2="6" />
|
||
<line x1="3.5" y1="4.5" x2="3.5" y2="4.5" />
|
||
<line x1="6.5" y1="4.5" x2="6.5" y2="4.5" />
|
||
</svg>
|
||
<div class="label">ai-10</div>
|
||
<div class="desc">Head silhouette with gear-mind</div>
|
||
<div class="inline-code"><path d="M3,8 L3,6 C2,5 2,3 3,2 L7,2 C8,3 8,5 7,6 L7,8" /><circle cx="5" cy="4.5" r="1.5" /><line x1="5" y1="3" x2="5" y2="3" /><line x1="5" y1="6" x2="5" y2="6" /><line x1="3.5" y1="4.5" x2="3.5" y2="4.5" /><line x1="6.5" y1="4.5" x2="6.5" y2="4.5" /></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
CASHU ICONS
|
||
============================================================ -->
|
||
<h2>💰 Cashu Icons (Bitcoin / Money)</h2>
|
||
<div class="grid">
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="5" cy="5" r="3" />
|
||
<line x1="5" y1="2" x2="5" y2="8" />
|
||
<path d="M4,3 L6,3 C7,3 7,5 6,5 L4,5" />
|
||
<path d="M4,5 L6,5 C7,5 7,7 6,7 L4,7" />
|
||
</svg>
|
||
<div class="label">cashu-01</div>
|
||
<div class="desc">Bitcoin ₿ symbol</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3" /><line x1="5" y1="2" x2="5" y2="8" /><path d="M4,3 L6,3 C7,3 7,5 6,5 L4,5" /><path d="M4,5 L6,5 C7,5 7,7 6,7 L4,7" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="5" cy="5" r="3" />
|
||
<path d="M6,3.5 C5,3 4,3.5 4,4.5 C4,5.5 6,5.5 6,6.5 C6,7.5 5,7 4,7.5" />
|
||
</svg>
|
||
<div class="label">cashu-02</div>
|
||
<div class="desc">Coin with S-curve (dollar)</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3" /><path d="M6,3.5 C5,3 4,3.5 4,4.5 C4,5.5 6,5.5 6,6.5 C6,7.5 5,7 4,7.5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="5" cy="4" r="2.5" />
|
||
<circle cx="5" cy="6" r="2.5" />
|
||
</svg>
|
||
<div class="label">cashu-03</div>
|
||
<div class="desc">Stacked coins</div>
|
||
<div class="inline-code"><circle cx="5" cy="4" r="2.5" /><circle cx="5" cy="6" r="2.5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="5" cy="5" r="3" />
|
||
<path d="M5.5,3 L4,5.5 L5.5,5.5 L4.5,7 L6,4.5 L4.5,4.5 L5.5,3" />
|
||
</svg>
|
||
<div class="label">cashu-04</div>
|
||
<div class="desc">Lightning in circle (LN)</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3" /><path d="M5.5,3 L4,5.5 L5.5,5.5 L4.5,7 L6,4.5 L4.5,4.5 L5.5,3" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,2 C3,2 2,4 2,5 C2,7 3,8 5,8 C7,8 8,7 8,5 C8,3 6,2 5,2" />
|
||
<path d="M4,4 C4.5,5 5.5,6 6,6" />
|
||
</svg>
|
||
<div class="label">cashu-05</div>
|
||
<div class="desc">Cashew nut (literal)</div>
|
||
<div class="inline-code"><path d="M5,2 C3,2 2,4 2,5 C2,7 3,8 5,8 C7,8 8,7 8,5 C8,3 6,2 5,2" /><path d="M4,4 C4.5,5 5.5,6 6,6" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,3 L2,8 L8,8 L8,3" />
|
||
<path d="M2,3 L5,2 L8,3" />
|
||
<circle cx="5" cy="5.5" r="1.5" />
|
||
</svg>
|
||
<div class="label">cashu-06</div>
|
||
<div class="desc">Wallet with coin</div>
|
||
<div class="inline-code"><path d="M2,3 L2,8 L8,8 L8,3" /><path d="M2,3 L5,2 L8,3" /><circle cx="5" cy="5.5" r="1.5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M3,4 L5,2 L7,4 L5,8 Z" />
|
||
<line x1="3" y1="4" x2="7" y2="4" />
|
||
<line x1="5" y1="2" x2="5" y2="8" />
|
||
</svg>
|
||
<div class="label">cashu-07</div>
|
||
<div class="desc">Diamond / gem</div>
|
||
<div class="inline-code"><path d="M3,4 L5,2 L7,4 L5,8 Z" /><line x1="3" y1="4" x2="7" y2="4" /><line x1="5" y1="2" x2="5" y2="8" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="5" cy="5" r="3" />
|
||
<path d="M6,3.5 C5,3 3.5,3.5 3.5,5 C3.5,6.5 5,7 6,6.5" />
|
||
</svg>
|
||
<div class="label">cashu-08</div>
|
||
<div class="desc">Token with C arc</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3" /><path d="M6,3.5 C5,3 3.5,3.5 3.5,5 C3.5,6.5 5,7 6,6.5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="3.5" cy="5" r="1.5" />
|
||
<circle cx="7" cy="5" r="1.5" />
|
||
</svg>
|
||
<div class="label">cashu-09</div>
|
||
<div class="desc">Two clean circles</div>
|
||
<div class="inline-code"><circle cx="3.5" cy="5" r="1.5" /><circle cx="7" cy="5" r="1.5" /><path d="M5,3 L7,3 L7,3 L5,3 L5,2" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect x="2" y="2" width="6" height="6" />
|
||
<circle cx="5" cy="5" r="1.5" />
|
||
<line x1="5" y1="3.5" x2="5" y2="4" />
|
||
<line x1="6" y1="5" x2="8" y2="5" />
|
||
</svg>
|
||
<div class="label">cashu-10</div>
|
||
<div class="desc">Safe / vault</div>
|
||
<div class="inline-code"><rect x="2" y="2" width="6" height="6" /><circle cx="5" cy="5" r="1.5" /><line x1="5" y1="3.5" x2="5" y2="4" /><line x1="6" y1="5" x2="8" y2="5" /></div>
|
||
</div>
|
||
|
||
<!-- NEW ICONS -->
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3"/><path d="M5,2 L5,8"/></svg>
|
||
<div class="label">cashu-11</div>
|
||
<div class="desc">Single coin with central line</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3"/><path d="M5,2 L5,8"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><ellipse cx="5" cy="3" rx="2.5" ry="1"/><ellipse cx="5" cy="5" rx="2.5" ry="1"/><ellipse cx="5" cy="7" rx="2.5" ry="1"/></svg>
|
||
<div class="label">cashu-12</div>
|
||
<div class="desc">Stack of 3 coins</div>
|
||
<div class="inline-code"><ellipse cx="5" cy="3" rx="2.5" ry="1"/><ellipse cx="5" cy="5" rx="2.5" ry="1"/><ellipse cx="5" cy="7" rx="2.5" ry="1"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M3,2 L3,6 L7,6 L7,2"/><circle cx="5" cy="4" r="1.5"/></svg>
|
||
<div class="label">cashu-13</div>
|
||
<div class="desc">Coin in slot</div>
|
||
<div class="inline-code"><path d="M3,2 L3,6 L7,6 L7,2"/><circle cx="5" cy="4" r="1.5"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="4" cy="5" r="2.5"/><circle cx="6" cy="5" r="2.5"/></svg>
|
||
<div class="label">cashu-14</div>
|
||
<div class="desc">Two overlapping coins</div>
|
||
<div class="inline-code"><circle cx="4" cy="5" r="2.5"/><circle cx="6" cy="5" r="2.5"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3"/><line x1="5" y1="1" x2="5" y2="2"/><line x1="5" y1="8" x2="5" y2="9"/><line x1="1" y1="5" x2="2" y2="5"/><line x1="8" y1="5" x2="9" y2="5"/></svg>
|
||
<div class="label">cashu-15</div>
|
||
<div class="desc">Minting / sparkling coin</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3"/><line x1="5" y1="1" x2="5" y2="2"/><line x1="5" y1="8" x2="5" y2="9"/><line x1="1" y1="5" x2="2" y2="5"/><line x1="8" y1="5" x2="9" y2="5"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2,2 L8,2 L8,5 C8,8 5,9 2,5 Z"/><circle cx="5" cy="4" r="1.5"/></svg>
|
||
<div class="label">cashu-16</div>
|
||
<div class="desc">Coin in shield</div>
|
||
<div class="inline-code"><path d="M2,2 L8,2 L8,5 C8,8 5,9 2,5 Z"/><circle cx="5" cy="4" r="1.5"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2,4 L8,4 L8,8 L2,8 Z"/><circle cx="4" cy="2" r="1"/><circle cx="6" cy="2" r="1"/></svg>
|
||
<div class="label">cashu-17</div>
|
||
<div class="desc">Wallet with coins</div>
|
||
<div class="inline-code"><path d="M2,4 L8,4 L8,8 L2,8 Z"/><circle cx="4" cy="2" r="1"/><circle cx="6" cy="2" r="1"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><ellipse cx="5" cy="5" rx="1" ry="3"/><circle cx="5" cy="5" r="3" fill="none" stroke="currentColor"/></svg>
|
||
<div class="label">cashu-18</div>
|
||
<div class="desc">Tilted coin edge</div>
|
||
<div class="inline-code"><ellipse cx="5" cy="5" rx="1" ry="3"/><circle cx="5" cy="5" r="3"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M3,2 L7,2 C9,2 9,4 9,5 C9,6 9,8 7,8 L3,8 C1,8 1,6 1,5 C1,4 1,2 3,2 Z"/><circle cx="5" cy="5" r="1.5"/></svg>
|
||
<div class="label">cashu-19</div>
|
||
<div class="desc">Purse with coin</div>
|
||
<div class="inline-code"><path d="M3,2 L7,2 C9,2 9,4 9,5 C9,6 9,8 7,8 L3,8 C1,8 1,6 1,5 C1,4 1,2 3,2 Z"/><circle cx="5" cy="5" r="1.5"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="3" cy="7" r="1"/><circle cx="5" cy="5" r="1"/><circle cx="7" cy="3" r="1"/><path d="M3,7 L5,5 L7,3"/></svg>
|
||
<div class="label">cashu-20</div>
|
||
<div class="desc">Coin growth graph</div>
|
||
<div class="inline-code"><circle cx="3" cy="7" r="1"/><circle cx="5" cy="5" r="1"/><circle cx="7" cy="3" r="1"/><path d="M3,7 L5,5 L7,3"/></div>
|
||
</div>
|
||
<div class="inline-code"><rect x="2" y="2" width="6" height="6" /><circle cx="5" cy="5" r="1.5" /><line x1="5" y1="3.5" x2="5" y2="4" /><line x1="6" y1="5" x2="8" y2="5" /></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
STRUDEL ICONS
|
||
============================================================ -->
|
||
<h2>🎵 Strudel Icons (Music / Rhythm)</h2>
|
||
<div class="grid">
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="4" cy="7" r="1" />
|
||
<line x1="5" y1="7" x2="5" y2="2" />
|
||
<path d="M5,2 C6,2 7,3 7,4" />
|
||
</svg>
|
||
<div class="label">strudel-01</div>
|
||
<div class="desc">Single music note</div>
|
||
<div class="inline-code"><circle cx="4" cy="7" r="1" /><line x1="5" y1="7" x2="5" y2="2" /><path d="M5,2 C6,2 7,3 7,4" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="3" cy="7" r="1" />
|
||
<circle cx="7" cy="6" r="1" />
|
||
<line x1="4" y1="7" x2="4" y2="2" />
|
||
<line x1="8" y1="6" x2="8" y2="2" />
|
||
<line x1="4" y1="2" x2="8" y2="2" />
|
||
</svg>
|
||
<div class="label">strudel-02</div>
|
||
<div class="desc">Double beamed notes</div>
|
||
<div class="inline-code"><circle cx="3" cy="7" r="1" /><circle cx="7" cy="6" r="1" /><line x1="4" y1="7" x2="4" y2="2" /><line x1="8" y1="6" x2="8" y2="2" /><line x1="4" y1="2" x2="8" y2="2" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,5 C3,2 4,2 5,5 C6,8 7,8 8,5" />
|
||
</svg>
|
||
<div class="label">strudel-03</div>
|
||
<div class="desc">Sine wave</div>
|
||
<div class="inline-code"><path d="M2,5 C3,2 4,2 5,5 C6,8 7,8 8,5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,4 L3,4 L5,2 L5,8 L3,6 L2,6 Z" />
|
||
<path d="M6,4 C7,4.5 7,5.5 6,6" />
|
||
<path d="M7,3 C8,4 8,6 7,7" />
|
||
</svg>
|
||
<div class="label">strudel-04</div>
|
||
<div class="desc">Speaker with sound waves</div>
|
||
<div class="inline-code"><path d="M2,4 L3,4 L5,2 L5,8 L3,6 L2,6 Z" /><path d="M6,4 C7,4.5 7,5.5 6,6" /><path d="M7,3 C8,4 8,6 7,7" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<line x1="3" y1="8" x2="3" y2="4" />
|
||
<line x1="4.5" y1="8" x2="4.5" y2="2" />
|
||
<line x1="6" y1="8" x2="6" y2="5" />
|
||
<line x1="7.5" y1="8" x2="7.5" y2="3" />
|
||
</svg>
|
||
<div class="label">strudel-05</div>
|
||
<div class="desc">Equalizer bars</div>
|
||
<div class="inline-code"><line x1="3" y1="8" x2="3" y2="4" /><line x1="4.5" y1="8" x2="4.5" y2="2" /><line x1="6" y1="8" x2="6" y2="5" /><line x1="7.5" y1="8" x2="7.5" y2="3" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,2 C3,3 3,5 5,5 C7,5 7,7 5,8 C3,8 3,7 4,6" />
|
||
<line x1="5" y1="2" x2="5" y2="8" />
|
||
</svg>
|
||
<div class="label">strudel-06</div>
|
||
<div class="desc">Treble clef (simplified)</div>
|
||
<div class="inline-code"><path d="M5,2 C3,3 3,5 5,5 C7,5 7,7 5,8 C3,8 3,7 4,6" /><line x1="5" y1="2" x2="5" y2="8" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M3,2 L8,5 L3,8 Z" />
|
||
</svg>
|
||
<div class="label">strudel-07</div>
|
||
<div class="desc">Play button</div>
|
||
<div class="inline-code"><path d="M3,2 L8,5 L3,8 Z" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,6 C2,3 3,2 5,2 C7,2 8,3 8,6" />
|
||
<rect x="2" y="6" width="1" height="2" />
|
||
<rect x="7" y="6" width="1" height="2" />
|
||
</svg>
|
||
<div class="label">strudel-08</div>
|
||
<div class="desc">Headphones</div>
|
||
<div class="inline-code"><path d="M2,6 C2,3 3,2 5,2 C7,2 8,3 8,6" /><rect x="2" y="6" width="1" height="2" /><rect x="7" y="6" width="1" height="2" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,5 L3,3 L4,7 L5,2 L6,8 L7,4 L8,5" />
|
||
</svg>
|
||
<div class="label">strudel-09</div>
|
||
<div class="desc">Waveform / oscilloscope</div>
|
||
<div class="inline-code"><path d="M2,5 L3,3 L4,7 L5,2 L6,8 L7,4 L8,5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,5 C5,4 6,4 6,5 C6,6 4,6 4,5 C4,3 7,3 7,5 C7,7 3,7 3,5 C3,2 8,2 8,5 C8,8 2,8 2,5" />
|
||
</svg>
|
||
<div class="label">strudel-10</div>
|
||
<div class="desc">Spiral (literal strudel pastry)</div>
|
||
<div class="inline-code"><path d="M5,5 C5,4 6,4 6,5 C6,6 4,6 4,5 C4,3 7,3 7,5 C7,7 3,7 3,5 C3,2 8,2 8,5 C8,8 2,8 2,5" /></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
LOVE ICONS
|
||
============================================================ -->
|
||
<h2>❤️ Love Icons (Likes / Notifications)</h2>
|
||
<div class="grid">
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" />
|
||
</svg>
|
||
<div class="label">love-01</div>
|
||
<div class="desc">Classic heart outline</div>
|
||
<div class="inline-code"><path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><line x1="5" y1="5" x2="5" y2="5" />
|
||
</svg>
|
||
<div class="label">love-02</div>
|
||
<div class="desc">Heart with center spark</div>
|
||
<div class="inline-code"><path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><line x1="5" y1="5" x2="5" y2="5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M4,8 L2,6 C2,5 2,4 3,3 C4,3 4,4 4,4 C4,4 5,3 6,3 C7,4 7,5 6,6 Z" /><path d="M6,8 L4,6 C4,5 4,4 5,3 C6,3 6,4 6,4 C6,4 7,3 8,3 C8,4 8,5 7,6 Z" />
|
||
</svg>
|
||
<div class="label">love-03</div>
|
||
<div class="desc">Double-heart linked</div>
|
||
<div class="inline-code"><path d="M4,8 L2,6 C2,5 2,4 3,3 C4,3 4,4 4,4 C4,4 5,3 6,3 C7,4 7,5 6,6 Z" /><path d="M6,8 L4,6 C4,5 4,4 5,3 C6,3 6,4 6,4 C6,4 7,3 8,3 C8,4 8,5 7,6 Z" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle cx="5" cy="5" r="3" /><path d="M5,7 L4,6 C3,5 3,4 4,3 C5,3 5,4 5,4 C5,4 5,3 6,3 C7,4 7,5 6,6 Z" />
|
||
</svg>
|
||
<div class="label">love-04</div>
|
||
<div class="desc">Heart in circle</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3" /><path d="M5,7 L4,6 C3,5 3,4 4,3 C5,3 5,4 5,4 C5,4 5,3 6,3 C7,4 7,5 6,6 Z" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M2,5 L3,5 L4,3 L5,7 L6,4 L7,5 L8,5" /><path d="M6,8 L5,7 C5,6 5,5 6,5 C7,5 7,6 7,6 C7,6 7,5 8,5 C8,6 8,7 7,7 Z" />
|
||
</svg>
|
||
<div class="label">love-05</div>
|
||
<div class="desc">Heartbeat + heart</div>
|
||
<div class="inline-code"><path d="M2,5 L3,5 L4,3 L5,7 L6,4 L7,5 L8,5" /><path d="M6,8 L5,7 C5,6 5,5 6,5 C7,5 7,6 7,6 C7,6 7,5 8,5 C8,6 8,7 7,7 Z" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><line x1="5" y1="4" x2="5" y2="6" /><line x1="4" y1="5" x2="6" y2="5" />
|
||
</svg>
|
||
<div class="label">love-06</div>
|
||
<div class="desc">Heart with plus</div>
|
||
<div class="inline-code"><path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><line x1="5" y1="4" x2="5" y2="6" /><line x1="4" y1="5" x2="6" y2="5" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,7 L3,5 C2,4 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,4 7,5 Z" /><path d="M4,7 L3,8 L5,7" />
|
||
</svg>
|
||
<div class="label">love-07</div>
|
||
<div class="desc">Heart with chat tail</div>
|
||
<div class="inline-code"><path d="M5,7 L3,5 C2,4 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,4 7,5 Z" /><path d="M4,7 L3,8 L5,7" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><rect x="4" y="5" width="2" height="2" /><line x1="5" y1="5" x2="5" y2="4" />
|
||
</svg>
|
||
<div class="label">love-08</div>
|
||
<div class="desc">Heart lock</div>
|
||
<div class="inline-code"><path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><rect x="4" y="5" width="2" height="2" /><line x1="5" y1="5" x2="5" y2="4" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><path d="M2,8 L8,2 L6,2 L8,2 L8,4" />
|
||
</svg>
|
||
<div class="label">love-09</div>
|
||
<div class="desc">Heart arrow</div>
|
||
<div class="inline-code"><path d="M5,8 L3,6 C2,5 2,3 3,2 C4,2 5,3 5,4 C5,3 6,2 7,2 C8,3 8,5 7,6 Z" /><path d="M2,8 L8,2 L6,2 L8,2 L8,4" /></div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<path d="M5,8 L2,5 C2,3 3,2 4,2 C5,2 5,3 5,3 C5,3 5,2 6,2 C7,2 8,3 8,5 Z" />
|
||
</svg>
|
||
<div class="label">love-10</div>
|
||
<div class="desc">Minimal heart glyph</div>
|
||
<div class="inline-code"><path d="M5,8 L2,5 C2,3 3,2 4,2 C5,2 5,3 5,3 C5,3 5,2 6,2 C7,2 8,3 8,5 Z" /></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
SIGN IN ICONS
|
||
============================================================ -->
|
||
<h2>🔑 Sign In Icons</h2>
|
||
<div class="grid">
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="3.5" r="1.5" fill="none" stroke="currentColor"/><path d="M2,8 C2,6 3,5 5,5 C7,5 8,6 8,8"/></svg>
|
||
<div class="label">signin-01</div>
|
||
<div class="desc">Head and shoulders</div>
|
||
<div class="inline-code"><circle cx="5" cy="3.5" r="1.5" fill="none" stroke="currentColor"/><path d="M2,8 C2,6 3,5 5,5 C7,5 8,6 8,8"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="3" r="1.5"/><path d="M3,5 L7,5 L6,8 L4,8 Z"/></svg>
|
||
<div class="label">signin-02</div>
|
||
<div class="desc">Head and torso</div>
|
||
<div class="inline-code"><circle cx="5" cy="3" r="1.5"/><path d="M3,5 L7,5 L6,8 L4,8 Z"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="3" r="1.5"/><path d="M2,9 C2,6 3,5 5,5 C7,5 8,6 8,9"/></svg>
|
||
<div class="label">signin-03</div>
|
||
<div class="desc">Head and wide shoulders</div>
|
||
<div class="inline-code"><circle cx="5" cy="3" r="1.5"/><path d="M2,9 C2,6 3,5 5,5 C7,5 8,6 8,9"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="3" r="1.5"/><path d="M3,5 L7,5 L7,8 L3,8 Z"/></svg>
|
||
<div class="label">signin-04</div>
|
||
<div class="desc">Head and square torso</div>
|
||
<div class="inline-code"><circle cx="5" cy="3" r="1.5"/><path d="M3,5 L7,5 L7,8 L3,8 Z"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="3" r="1.5"/><path d="M2,8 L5,5 L8,8"/></svg>
|
||
<div class="label">signin-05</div>
|
||
<div class="desc">Head and V-neck</div>
|
||
<div class="inline-code"><circle cx="5" cy="3" r="1.5"/><path d="M2,8 L5,5 L8,8"/></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
CONWAY ICONS
|
||
============================================================ -->
|
||
<h2>🧬 Conway Icons (3x3 Mixed Cells)</h2>
|
||
<div class="grid conway-grid">
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="dead" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="4.15" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="1.6" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="4.15" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="4.15" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
</svg>
|
||
<div class="label">conway-01</div>
|
||
<div class="desc">Outlined rounded squares with visible gaps</div>
|
||
<div class="inline-code">3x3 dead cells only (empty)</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="alive" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="dead" x="4.15" y="1.6" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="dead" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="dead" x="1.6" y="4.15" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="alive" x="4.15" y="4.15" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="dead" x="6.7" y="4.15" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="dead" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="dead" x="4.15" y="6.7" width="1.7" height="1.7" rx="0.4" />
|
||
<rect class="alive" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.4" />
|
||
</svg>
|
||
<div class="label">conway-02</div>
|
||
<div class="desc">Diagonal alive squares + empty squares</div>
|
||
<div class="inline-code">Filled diagonal cells</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle class="alive" cx="5" cy="2.45" r="0.85" />
|
||
<circle class="alive" cx="7.55" cy="5" r="0.85" />
|
||
<circle class="alive" cx="2.45" cy="7.55" r="0.85" />
|
||
<circle class="alive" cx="5" cy="7.55" r="0.85" />
|
||
<circle class="alive" cx="7.55" cy="7.55" r="0.85" />
|
||
</svg>
|
||
<div class="label">conway-03</div>
|
||
<div class="desc">Glider-inspired circles</div>
|
||
<div class="inline-code">Circle-only variant</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="alive" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="5" cy="2.45" r="0.85" />
|
||
<rect class="alive" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="2.45" cy="5" r="0.85" />
|
||
<rect class="dead" x="4.15" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="7.55" cy="5" r="0.85" />
|
||
<rect class="alive" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="5" cy="7.55" r="0.85" />
|
||
<rect class="alive" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
</svg>
|
||
<div class="label">conway-04</div>
|
||
<div class="desc">Mixed checker: squares + circles + empty center</div>
|
||
<div class="inline-code">Alternating cell geometry</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="dead" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="4.15" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="1.6" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="5" cy="5" r="0.9" />
|
||
<rect class="alive" x="6.7" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="4.15" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
</svg>
|
||
<div class="label">conway-05</div>
|
||
<div class="desc">Plus pattern with circular center</div>
|
||
<div class="inline-code">Cross population + empty corners</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<circle class="alive" cx="2.45" cy="2.45" r="0.8" />
|
||
<circle class="alive" cx="5" cy="2.45" r="0.8" />
|
||
<circle class="alive" cx="7.55" cy="2.45" r="0.8" />
|
||
<circle class="alive" cx="2.45" cy="5" r="0.8" />
|
||
<rect class="dead" x="4.15" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="7.55" cy="5" r="0.8" />
|
||
<circle class="alive" cx="2.45" cy="7.55" r="0.8" />
|
||
<circle class="alive" cx="5" cy="7.55" r="0.8" />
|
||
<circle class="alive" cx="7.55" cy="7.55" r="0.8" />
|
||
</svg>
|
||
<div class="label">conway-06</div>
|
||
<div class="desc">Ring of circles around an empty center square</div>
|
||
<div class="inline-code">8 alive circles + 1 dead center</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="dead" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="4.15" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="2.45" cy="5" r="0.82" />
|
||
<circle class="alive" cx="5" cy="5" r="0.82" />
|
||
<circle class="alive" cx="7.55" cy="5" r="0.82" />
|
||
<rect class="dead" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="4.15" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
</svg>
|
||
<div class="label">conway-07</div>
|
||
<div class="desc">Horizontal blinker using circles</div>
|
||
<div class="inline-code">3 alive circles in middle row</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="dead" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="4.15" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="1.6" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="4.15" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="4.15" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
</svg>
|
||
<div class="label">conway-08</div>
|
||
<div class="desc">Vertical blinker with empty side columns</div>
|
||
<div class="inline-code">3 alive squares in middle column</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="alive" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="4.15" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="1.6" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="4.15" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="7.55" cy="5" r="0.82" />
|
||
<rect class="dead" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="4.15" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
</svg>
|
||
<div class="label">conway-09</div>
|
||
<div class="desc">2x2 block plus tail (square/circle mix)</div>
|
||
<div class="inline-code">Stable block with asym tail</div>
|
||
</div>
|
||
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10">
|
||
<rect class="dead" x="1.6" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="5" cy="2.45" r="0.82" />
|
||
<rect class="dead" x="6.7" y="1.6" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="alive" x="1.6" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="5" cy="5" r="0.92" />
|
||
<rect class="alive" x="6.7" y="4.15" width="1.7" height="1.7" rx="0.35" />
|
||
<rect class="dead" x="1.6" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
<circle class="alive" cx="5" cy="7.55" r="0.82" />
|
||
<rect class="dead" x="6.7" y="6.7" width="1.7" height="1.7" rx="0.35" />
|
||
</svg>
|
||
<div class="label">conway-10</div>
|
||
<div class="desc">Mixed totem: circles centerline with side blocks</div>
|
||
<div class="inline-code">Squares + circles + empty corners</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
<!-- ============================================================
|
||
SKILLS EDIT ICONS
|
||
============================================================ -->
|
||
<h2>🛠 Skills Edit Icons</h2>
|
||
<div class="grid">
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 9l8-8m-2 0l2 2m-8 6l2-2" /></svg>
|
||
<div class="label">skills-01</div>
|
||
<div class="desc">Pencil edit</div>
|
||
<div class="inline-code"><path d="M1 9l8-8m-2 0l2 2m-8 6l2-2" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3" /><path d="M5 2v3l2 2" /></svg>
|
||
<div class="label">skills-02</div>
|
||
<div class="desc">Gear component</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3" /><path d="M5 2v3l2 2" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M3 2l-2 3 2 3M7 2l2 3-2 3" /></svg>
|
||
<div class="label">skills-03</div>
|
||
<div class="desc">Code brackets</div>
|
||
<div class="inline-code"><path d="M3 2l-2 3 2 3M7 2l2 3-2 3" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2 8l6-6m-4 0l4 4" /></svg>
|
||
<div class="label">skills-04</div>
|
||
<div class="desc">Wrench tool</div>
|
||
<div class="inline-code"><path d="M2 8l6-6m-4 0l4 4" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="2" y="2" width="6" height="6" rx="1" /><path d="M2 4h6M4 2v6" /></svg>
|
||
<div class="label">skills-05</div>
|
||
<div class="desc">Grid layout</div>
|
||
<div class="inline-code"><rect x="2" y="2" width="6" height="6" rx="1" /><path d="M2 4h6M4 2v6" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 5h8M5 1v8" /></svg>
|
||
<div class="label">skills-06</div>
|
||
<div class="desc">Plus adjust</div>
|
||
<div class="inline-code"><path d="M1 5h8M5 1v8" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2 2l6 6M8 2l-6 6" /></svg>
|
||
<div class="label">skills-07</div>
|
||
<div class="desc">X delete</div>
|
||
<div class="inline-code"><path d="M2 2l6 6M8 2l-6 6" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M3 3h4v4H3z" /><path d="M5 1v2M5 7v2M1 5h2M7 5h2" /></svg>
|
||
<div class="label">skills-08</div>
|
||
<div class="desc">Move tool</div>
|
||
<div class="inline-code"><path d="M3 3h4v4H3z" /><path d="M5 1v2M5 7v2M1 5h2M7 5h2" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 8l2-2 2 2 2-2 2 2" /></svg>
|
||
<div class="label">skills-09</div>
|
||
<div class="desc">Wave edit</div>
|
||
<div class="inline-code"><path d="M1 8l2-2 2 2 2-2 2 2" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3" /><path d="M5 1v1M5 8v1M1 5h1M8 5h1" /></svg>
|
||
<div class="label">skills-10</div>
|
||
<div class="desc">Setting dial</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3" /><path d="M5 1v1M5 8v1M1 5h1M8 5h1" /></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
KEEP ALIVE ICONS
|
||
============================================================ -->
|
||
<h2>💓 Keep Alive Icons</h2>
|
||
<div class="grid">
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M5 9L3 7L1 5L3 3L5 1L7 3L9 5L7 7L5 9z" /></svg>
|
||
<div class="label">alive-01</div>
|
||
<div class="desc">Heartbeat pulse</div>
|
||
<div class="inline-code"><path d="M5 9L3 7L1 5L3 3L5 1L7 3L9 5L7 7L5 9z" /></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="2" y="3" width="6" height="4" rx="1"/><rect x="8" y="4" width="1" height="2"/></svg>
|
||
<div class="label">alive-02</div>
|
||
<div class="desc">Battery full</div>
|
||
<div class="inline-code"><rect x="2" y="3" width="6" height="4" rx="1"/><rect x="8" y="4" width="1" height="2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 5l2-2 2 4 2-4 2 2"/></svg>
|
||
<div class="label">alive-03</div>
|
||
<div class="desc">Live pulse line</div>
|
||
<div class="inline-code"><path d="M1 5l2-2 2 4 2-4 2 2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2 8V4c0-2 2-2 3-2s3 0 3 2v4M2 8h6"/></svg>
|
||
<div class="label">alive-04</div>
|
||
<div class="desc">Shield protection</div>
|
||
<div class="inline-code"><path d="M2 8V4c0-2 2-2 3-2s3 0 3 2v4M2 8h6"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2 5a3 3 0 1 0 6 0 3 3 0 1 0-6 0M2 5h6M5 2v6"/></svg>
|
||
<div class="label">alive-05</div>
|
||
<div class="desc">Infinite refresh</div>
|
||
<div class="inline-code"><path d="M2 5a3 3 0 1 0 6 0 3 3 0 1 0-6 0M2 5h6M5 2v6"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/><path d="M5 2v3l2 2"/></svg>
|
||
<div class="label">alive-06</div>
|
||
<div class="desc">Clock timer</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="4"/><path d="M5 2v3l2 2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 5h8M5 1v8"/><circle cx="5" cy="5" r="2"/></svg>
|
||
<div class="label">alive-07</div>
|
||
<div class="desc">Target lock</div>
|
||
<div class="inline-code"><path d="M1 5h8M5 1v8"/><circle cx="5" cy="5" r="2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2 2h6v6H2z"/><path d="M2 2l3 3 3-3"/></svg>
|
||
<div class="label">alive-08</div>
|
||
<div class="desc">Box check</div>
|
||
<div class="inline-code"><path d="M2 2h6v6H2z"/><path d="M2 2l3 3 3-3"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M5 1l4 8H1z"/></svg>
|
||
<div class="label">alive-09</div>
|
||
<div class="desc">Warning triangle</div>
|
||
<div class="inline-code"><path d="M5 1l4 8H1z"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M2 5h1l2-3 2 6 2-3h1"/></svg>
|
||
<div class="label">alive-10</div>
|
||
<div class="desc">Signal strength</div>
|
||
<div class="inline-code"><path d="M2 5h1l2-3 2 6 2-3h1"/></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
VJ ICONS
|
||
============================================================ -->
|
||
<h2>📺 VJ Icons</h2>
|
||
<div class="grid">
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="1" y="2" width="8" height="6" rx="1"/><path d="M4 8l1 2 1-2"/></svg>
|
||
<div class="label">vj-01</div>
|
||
<div class="desc">TV screen</div>
|
||
<div class="inline-code"><rect x="1" y="2" width="8" height="6" rx="1"/><path d="M4 8l1 2 1-2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3"/><circle cx="5" cy="5" r="1"/></svg>
|
||
<div class="label">vj-02</div>
|
||
<div class="desc">Camera lens</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3"/><circle cx="5" cy="5" r="1"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 5l1-2 2 4 2-4 2 4 1-2"/></svg>
|
||
<div class="label">vj-03</div>
|
||
<div class="desc">Audio waveform</div>
|
||
<div class="inline-code"><path d="M1 5l1-2 2 4 2-4 2 4 1-2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M5 1l2 3h2l-3 3 1 3-3-2-3 2 1-3-3-3h2z"/></svg>
|
||
<div class="label">vj-04</div>
|
||
<div class="desc">Lightning/Flash</div>
|
||
<div class="inline-code"><path d="M5 1l2 3h2l-3 3 1 3-3-2-3 2 1-3-3-3h2z"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 2l6 3-6 3z"/><path d="M7 2h2v6h-2z"/></svg>
|
||
<div class="label">vj-05</div>
|
||
<div class="desc">Projector play</div>
|
||
<div class="inline-code"><path d="M1 2l6 3-6 3z"/><path d="M7 2h2v6h-2z"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 8h8M1 6h8M1 4h8M1 2h8"/></svg>
|
||
<div class="label">vj-06</div>
|
||
<div class="desc">Scan lines</div>
|
||
<div class="inline-code"><path d="M1 8h8M1 6h8M1 4h8M1 2h8"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M5 1l3 3-3 3-3-3z"/><path d="M2 8l3-3 3 3"/></svg>
|
||
<div class="label">vj-07</div>
|
||
<div class="desc">Diamond effect</div>
|
||
<div class="inline-code"><path d="M5 1l3 3-3 3-3-3z"/><path d="M2 8l3-3 3 3"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="3" y="3" width="4" height="4"/><path d="M3 3l-1-1M7 3l1-1M3 7l-1 1M7 7l1 1"/></svg>
|
||
<div class="label">vj-08</div>
|
||
<div class="desc">Frame adjust</div>
|
||
<div class="inline-code"><rect x="3" y="3" width="4" height="4"/><path d="M3 3l-1-1M7 3l1-1M3 7l-1 1M7 7l1 1"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><path d="M1 5l2 2 4-4 2 2"/></svg>
|
||
<div class="label">vj-09</div>
|
||
<div class="desc">Glitch pulse</div>
|
||
<div class="inline-code"><path d="M1 5l2 2 4-4 2 2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3"/><path d="M5 2v6m-3-3h6"/></svg>
|
||
<div class="label">vj-10</div>
|
||
<div class="desc">Center target focus</div>
|
||
<div class="inline-code"><circle cx="5" cy="5" r="3"/><path d="M5 2v6m-3-3h6"/></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
AI TV ICONS
|
||
============================================================ -->
|
||
<h2>🤖 AI TV Icons</h2>
|
||
<div class="grid">
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="1" y="3" width="8" height="5" rx="1"/><path d="M5 3V1M3 1l2 2M7 1l-2 2"/></svg>
|
||
<div class="label">aitv-01</div>
|
||
<div class="desc">TV with antenna</div>
|
||
<div class="inline-code"><rect x="1" y="3" width="8" height="5" rx="1"/><path d="M5 3V1M3 1l2 2M7 1l-2 2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="2" y="2" width="6" height="6" rx="1"/><path d="M4 4h2M4 6h2"/></svg>
|
||
<div class="label">aitv-02</div>
|
||
<div class="desc">Monitor interface</div>
|
||
<div class="inline-code"><rect x="2" y="2" width="6" height="6" rx="1"/><path d="M4 4h2M4 6h2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="2" y="3" width="6" height="4" rx="1"/><circle cx="5" cy="5" r="1"/></svg>
|
||
<div class="label">aitv-03</div>
|
||
<div class="desc">Robot eye screen</div>
|
||
<div class="inline-code"><rect x="2" y="3" width="6" height="4" rx="1"/><circle cx="5" cy="5" r="1"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="1" y="3" width="8" height="4" rx="1"/><path d="M1 5h8M5 3v4"/></svg>
|
||
<div class="label">aitv-04</div>
|
||
<div class="desc">Scan line TV</div>
|
||
<div class="inline-code"><rect x="1" y="3" width="8" height="4" rx="1"/><path d="M1 5h8M5 3v4"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="2" y="3" width="6" height="4" rx="1"/><path d="M3 5l1 1 2-2"/></svg>
|
||
<div class="label">aitv-05</div>
|
||
<div class="desc">AI processed check</div>
|
||
<div class="inline-code"><rect x="2" y="3" width="6" height="4" rx="1"/><path d="M3 5l1 1 2-2"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="1" y="2" width="8" height="6" rx="1"/><path d="M3 4l1 1-1 1M7 4l-1 1 1 1"/></svg>
|
||
<div class="label">aitv-06</div>
|
||
<div class="desc">Robotic face TV</div>
|
||
<div class="inline-code"><rect x="1" y="2" width="8" height="6" rx="1"/><path d="M3 4l1 1-1 1M7 4l-1 1 1 1"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="2" y="2" width="6" height="6" rx="1"/><path d="M5 2v6M2 5h6"/></svg>
|
||
<div class="label">aitv-07</div>
|
||
<div class="desc">Data grid monitor</div>
|
||
<div class="inline-code"><rect x="2" y="2" width="6" height="6" rx="1"/><path d="M5 2v6M2 5h6"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="3" y="2" width="4" height="4" rx="1"/><path d="M3 6h4l-1 2H4z"/></svg>
|
||
<div class="label">aitv-08</div>
|
||
<div class="desc">Monitor stand</div>
|
||
<div class="inline-code"><rect x="3" y="2" width="4" height="4" rx="1"/><path d="M3 6h4l-1 2H4z"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="1" y="3" width="8" height="4" rx="1"/><path d="M1 4h8M1 6h8"/></svg>
|
||
<div class="label">aitv-09</div>
|
||
<div class="desc">TV with horizontal bars</div>
|
||
<div class="inline-code"><rect x="1" y="3" width="8" height="4" rx="1"/><path d="M1 4h8M1 6h8"/></div>
|
||
</div>
|
||
<div class="card" onclick="this.classList.toggle('show-code')">
|
||
<svg viewBox="0 0 10 10"><rect x="2" y="2" width="6" height="6" rx="1"/><path d="M2 2l6 6M8 2l-6 6"/></svg>
|
||
<div class="label">aitv-10</div>
|
||
<div class="desc">System error screen</div>
|
||
<div class="inline-code"><rect x="2" y="2" width="6" height="6" rx="1"/><path d="M2 2l6 6M8 2l-6 6"/></div>
|
||
</div>
|
||
</div>
|