ddidderr/lanspread
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

design: seamless logo snake

Browse Source
This commit is contained in:
ddidderr
2026-06-21 20:27:08 +02:00
parent 14b30fe2da
commit 3d9d9cb450
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/design_reference/logo/pixel-live.jsx
+6 -3
View File
@@ -76,12 +76,15 @@ function renderSnake(p, accent) {
const start = Math.max(0, i - L + 1); const start = Math.max(0, i - L + 1);
const body = PATH.slice(start, i + 1); const body = PATH.slice(start, i + 1);
const n = body.length; const n = body.length;
// over the final stretch, ease the per-cell gradient/opacity/head-grow toward
// the flat, uniform static S so the hand-off to renderStatic is seamless.
const settle = Math.max(0, Math.min(1, (p - 0.82) / 0.18));
return body.map((cell, j) => { return body.map((cell, j) => {
const t = n > 1 ? j / (n - 1) : 1; // 0 tail → 1 head const t = n > 1 ? j / (n - 1) : 1; // 0 tail → 1 head
const fill = lshade(accent, (t - 0.45) * 0.5); // head brighter, tail darker const fill = lshade(accent, (t - 0.45) * 0.5 * (1 - settle)); // head brighter, tail darker
const opacity = 0.42 + 0.58 * t; const opacity = (0.42 + 0.58 * t) + (1 - (0.42 + 0.58 * t)) * settle;
const isHead = j === n - 1; const isHead = j === n - 1;
const grow = isHead ? 1.06 : 1; const grow = (isHead ? 1.06 : 1) * (1 - settle) + 1 * settle;
const s = LSIZE * grow, d = (LSIZE - s) / 2; const s = LSIZE * grow, d = (LSIZE - s) / 2;
return <Cell key={j} col={cell[0]} row={cell[1]} fill={fill} opacity={opacity} dx={d} dy={d} w={s} h={s} />; return <Cell key={j} col={cell[0]} row={cell[1]} fill={fill} opacity={opacity} dx={d} dy={d} w={s} h={s} />;
}); });