Jannik/Viz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redesign flame and cannabis leaf shapes, fix 4-column shape grid layout

Browse Source
This commit is contained in:
Jannik committed 2026-09-07 19:19:21 +02:00
1 parent f3c6e30f1b
commit a3b860bbe8
2 files changed
+100 -65
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/app.js
+93 -60
View File
@@ -645,26 +645,34 @@
];
} else if (shape === 'flame') {
verts = [
{ x: 0, y: -0.98 },
{ x: 0.16, y: -0.62 },
{ x: 0.26, y: -0.32 },
{ x: 0.44, y: -0.55 },
{ x: 0.68, y: -0.65 },
{ x: 0.58, y: -0.22 },
{ x: 0.78, y: 0.05 },
{ x: 0.85, y: 0.35 },
{ x: 0.65, y: 0.72 },
{ x: 0.35, y: 0.90 },
{ x: 0, y: 0.92 },
{ x: -0.35, y: 0.90 },
{ x: -0.65, y: 0.72 },
{ x: -0.85, y: 0.35 },
{ x: -0.78, y: 0.05 },
{ x: -0.58, y: -0.22 },
{ x: -0.68, y: -0.65 },
{ x: -0.44, y: -0.55 },
{ x: -0.26, y: -0.32 },
{ x: -0.16, y: -0.62 }
{ x: 0, y: -0.96 },
{ x: 0.10, y: -0.78 },
{ x: 0.18, y: -0.55 },
{ x: 0.22, y: -0.36 },
{ x: 0.32, y: -0.48 },
{ x: 0.50, y: -0.60 },
{ x: 0.46, y: -0.35 },
{ x: 0.44, y: -0.16 },
{ x: 0.62, y: -0.24 },
{ x: 0.76, y: -0.06 },
{ x: 0.70, y: 0.18 },
{ x: 0.80, y: 0.42 },
{ x: 0.68, y: 0.72 },
{ x: 0.38, y: 0.90 },
{ x: 0, y: 0.95 },
{ x: -0.38, y: 0.90 },
{ x: -0.68, y: 0.72 },
{ x: -0.80, y: 0.42 },
{ x: -0.70, y: 0.18 },
{ x: -0.76, y: -0.06 },
{ x: -0.62, y: -0.24 },
{ x: -0.44, y: -0.16 },
{ x: -0.46, y: -0.35 },
{ x: -0.50, y: -0.60 },
{ x: -0.32, y: -0.48 },
{ x: -0.22, y: -0.36 },
{ x: -0.18, y: -0.55 },
{ x: -0.10, y: -0.78 }
];
} else if (shape === 'skull') {
verts = [
@@ -911,26 +919,33 @@
}
} else if (shape === 'leaf') {
verts = [
{ x: 0, y: -0.96 },
{ x: 0.18, y: -0.80 },
{ x: 0.40, y: -0.58 },
{ x: 0.62, y: -0.28 },
{ x: 0.72, y: 0.05 },
{ x: 0.66, y: 0.38 },
{ x: 0.48, y: 0.65 },
{ x: 0.22, y: 0.82 },
{ x: 0.05, y: 0.88 },
{ x: 0.04, y: 0.98 },
{ x: 0, y: 0.99 },
{ x: -0.04, y: 0.98 },
{ x: -0.05, y: 0.88 },
{ x: -0.22, y: 0.82 },
{ x: -0.48, y: 0.65 },
{ x: -0.66, y: 0.38 },
{ x: -0.72, y: 0.05 },
{ x: -0.62, y: -0.28 },
{ x: -0.40, y: -0.58 },
{ x: -0.18, y: -0.80 }
{ x: -0.04, y: 0.95 }, { x: -0.032, y: 0.317 }, { x: -0.065, y: 0.264 }, { x: -0.189, y: 0.301 },
{ x: -0.274, y: 0.253 }, { x: -0.389, y: 0.245 }, { x: -0.507, y: 0.151 }, { x: -0.361, y: 0.114 },
{ x: -0.253, y: 0.154 }, { x: -0.156, y: 0.143 }, { x: -0.057, y: 0.228 }, { x: -0.121, y: 0.193 },
{ x: -0.063, y: 0.222 }, { x: -0.204, y: 0.179 }, { x: -0.263, y: 0.087 }, { x: -0.399, y: 0.038 },
{ x: -0.429, y: -0.083 }, { x: -0.527, y: -0.169 }, { x: -0.586, y: -0.327 }, { x: -0.428, y: -0.268 },
{ x: -0.342, y: -0.17 }, { x: -0.221, y: -0.14 }, { x: -0.172, y: -0.004 }, { x: -0.08, y: 0.055 },
{ x: -0.037, y: 0.196 }, { x: -0.074, y: 0.143 }, { x: -0.041, y: 0.197 }, { x: -0.149, y: 0.096 },
{ x: -0.168, y: -0.013 }, { x: -0.287, y: -0.11 }, { x: -0.267, y: -0.233 }, { x: -0.363, y: -0.338 },
{ x: -0.329, y: -0.466 }, { x: -0.378, y: -0.589 }, { x: -0.37, y: -0.758 }, { x: -0.255, y: -0.634 },
{ x: -0.214, y: -0.508 }, { x: -0.106, y: -0.432 }, { x: -0.112, y: -0.289 }, { x: -0.017, y: -0.208 },
{ x: -0.046, y: -0.057 }, { x: 0.009, y: 0.038 }, { x: -0.009, y: 0.185 }, { x: -0.024, y: 0.123 },
{ x: -0.02, y: 0.178 }, { x: -0.097, y: 0.031 }, { x: -0.075, y: -0.09 }, { x: -0.166, y: -0.238 },
{ x: -0.095, y: -0.359 }, { x: -0.158, y: -0.507 }, { x: -0.071, y: -0.628 }, { x: -0.076, y: -0.775 },
{ x: 0, y: -0.95 }, { x: 0.076, y: -0.775 }, { x: 0.071, y: -0.628 }, { x: 0.158, y: -0.507 },
{ x: 0.095, y: -0.359 }, { x: 0.166, y: -0.238 }, { x: 0.075, y: -0.09 }, { x: 0.097, y: 0.031 },
{ x: 0.02, y: 0.178 }, { x: 0.024, y: 0.123 }, { x: 0.009, y: 0.185 }, { x: -0.009, y: 0.038 },
{ x: 0.046, y: -0.057 }, { x: 0.017, y: -0.208 }, { x: 0.112, y: -0.289 }, { x: 0.106, y: -0.432 },
{ x: 0.214, y: -0.508 }, { x: 0.255, y: -0.634 }, { x: 0.37, y: -0.758 }, { x: 0.378, y: -0.589 },
{ x: 0.329, y: -0.466 }, { x: 0.363, y: -0.338 }, { x: 0.267, y: -0.233 }, { x: 0.287, y: -0.11 },
{ x: 0.168, y: -0.013 }, { x: 0.149, y: 0.096 }, { x: 0.041, y: 0.197 }, { x: 0.074, y: 0.143 },
{ x: 0.037, y: 0.196 }, { x: 0.08, y: 0.055 }, { x: 0.172, y: -0.004 }, { x: 0.221, y: -0.14 },
{ x: 0.342, y: -0.17 }, { x: 0.428, y: -0.268 }, { x: 0.586, y: -0.327 }, { x: 0.527, y: -0.169 },
{ x: 0.429, y: -0.083 }, { x: 0.399, y: 0.038 }, { x: 0.263, y: 0.087 }, { x: 0.204, y: 0.179 },
{ x: 0.063, y: 0.222 }, { x: 0.121, y: 0.193 }, { x: 0.057, y: 0.228 }, { x: 0.156, y: 0.143 },
{ x: 0.253, y: 0.154 }, { x: 0.361, y: 0.114 }, { x: 0.507, y: 0.151 }, { x: 0.389, y: 0.245 },
{ x: 0.274, y: 0.253 }, { x: 0.189, y: 0.301 }, { x: 0.065, y: 0.264 }, { x: 0.032, y: 0.317 },
{ x: 0.04, y: 0.95 }
];
} else if (shape === 'bat') {
verts = [
@@ -1075,33 +1090,51 @@
return;
}
if (shape === 'leaf') {
// Outer leaf blade
if (shape === 'flame') {
// Outer fire silhouette (licking 3-tongue flame)
targetCtx.moveTo(verts[0].x * radius, verts[0].y * radius);
for (let i = 1; i < verts.length; i++) {
targetCtx.lineTo(verts[i].x * radius, verts[i].y * radius);
}
targetCtx.closePath();
// Central botanical spine vein
targetCtx.moveTo(0, 0.95 * radius);
targetCtx.lineTo(0, -0.75 * radius);
// Delicate lateral leaf veins
targetCtx.moveTo(0, 0.40 * radius);
targetCtx.lineTo(0.35 * radius, 0.20 * radius);
targetCtx.moveTo(0, 0.40 * radius);
targetCtx.lineTo(-0.35 * radius, 0.20 * radius);
targetCtx.moveTo(0, 0.0 * radius);
targetCtx.lineTo(0.40 * radius, -0.20 * radius);
targetCtx.moveTo(0, 0.0 * radius);
targetCtx.lineTo(-0.40 * radius, -0.20 * radius);
// Inner dancing core flame
targetCtx.moveTo(0, -0.35 * radius);
targetCtx.lineTo(0.25 * radius, -0.50 * radius);
targetCtx.moveTo(0, -0.35 * radius);
targetCtx.lineTo(-0.25 * radius, -0.50 * radius);
targetCtx.quadraticCurveTo(0.25 * radius, 0.05 * radius, 0.20 * radius, 0.40 * radius);
targetCtx.quadraticCurveTo(0.14 * radius, 0.70 * radius, 0, 0.76 * radius);
targetCtx.quadraticCurveTo(-0.14 * radius, 0.70 * radius, -0.20 * radius, 0.40 * radius);
targetCtx.quadraticCurveTo(-0.25 * radius, 0.05 * radius, 0, -0.35 * radius);
targetCtx.closePath();
return;
}
if (shape === 'leaf') {
// Outer cannabis leaf silhouette (7 serrated leaflets)
targetCtx.moveTo(verts[0].x * radius, verts[0].y * radius);
for (let i = 1; i < verts.length; i++) {
targetCtx.lineTo(verts[i].x * radius, verts[i].y * radius);
}
targetCtx.closePath();
// Central stem petiole
const baseNodeY = 0.259 * radius;
targetCtx.moveTo(0, baseNodeY);
targetCtx.lineTo(0, 0.95 * radius);
// Primary veins radiating to each of the 7 leaflet tips
const tips = [
{ x: -0.507, y: 0.151 },
{ x: -0.586, y: -0.327 },
{ x: -0.370, y: -0.758 },
{ x: 0, y: -0.950 },
{ x: 0.370, y: -0.758 },
{ x: 0.586, y: -0.327 },
{ x: 0.507, y: 0.151 }
];
for (const tip of tips) {
targetCtx.moveTo(0, baseNodeY);
targetCtx.lineTo(tip.x * radius, tip.y * radius);
}
return;
}
public/index.html
+7 -5
View File
@@ -314,7 +314,7 @@
<span class="shape-icon">⬡</span>
<span class="shape-label">Siebeneck</span>
</div>
</label>
<label class="shape-card">
<input type="radio" name="shapeType" value="star">
<div class="shape-card-inner">
@@ -335,7 +335,7 @@
<span class="shape-icon">💖</span>
<span class="shape-label">Herz</span>
</div>
</label>
<label class="shape-card">
<input type="radio" name="shapeType" value="cross">
<div class="shape-card-inner">
@@ -377,6 +377,7 @@
<span class="shape-icon">👑</span>
<span class="shape-label">Krone</span>
</div>
</label>
<label class="shape-card">
<input type="radio" name="shapeType" value="infinity">
@@ -486,10 +487,10 @@
<label class="shape-card">
<input type="radio" name="shapeType" value="leaf">
<div class="shape-card-inner">
<span class="shape-icon">🍃</span>
<span class="shape-label">Blatt</span>
<span class="shape-icon">🌿</span>
<span class="shape-label">Hanfblatt</span>
</div>
</label>
<label class="shape-card">
<input type="radio" name="shapeType" value="bat">
<div class="shape-card-inner">
@@ -503,6 +504,7 @@
<span class="shape-icon">🐺</span>
<span class="shape-label">Wolf</span>
</div>
</label>
<label class="shape-card">
<input type="radio" name="shapeType" value="anchor">