smesh-logo-light.html raw
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>smesh</title>
7 <style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #f5f5f0;
12 display: flex;
13 align-items: center;
14 justify-content: center;
15 min-height: 100vh;
16 overflow: hidden;
17 }
18
19 svg {
20 width: min(95vw, 95vh);
21 height: min(95vw, 95vh);
22 }
23
24 .edge {
25 stroke-linecap: round;
26 opacity: 0;
27 animation: edgeFade 0.4s ease forwards;
28 }
29
30 .center-shape {
31 opacity: 0;
32 animation: nodePop 0.3s ease forwards;
33 }
34
35 @keyframes edgeFade {
36 to { opacity: 1; }
37 }
38
39 @keyframes nodePop {
40 0% { opacity: 0; transform: scale(0); }
41 70% { transform: scale(1.2); }
42 100% { opacity: 1; transform: scale(1); }
43 }
44 </style>
45 </head>
46 <body>
47
48 <svg viewBox="160.68 160.68 478.65 478.65" xmlns="http://www.w3.org/2000/svg">
49 <rect x="160.68" y="160.68" width="478.65" height="478.65" fill="#f5f5f0" />
50 <g id="lattice"></g>
51 </svg>
52
53 <script>
54 const SVG_NS = "http://www.w3.org/2000/svg";
55 const cx = 400, cy = 400;
56 const latticeG = document.getElementById("lattice");
57
58 const branchColors = [
59 "#2266cc", // blue (up)
60 "#cc2233", // red (lower-left)
61 "#22aa44", // green (lower-right)
62 ];
63
64 let delay = 0;
65 const edges = [];
66
67 const baseLen = 110;
68 const decay = 0.56;
69 const baseWidth = 32;
70
71 const branchAngles = [
72 -Math.PI / 2,
73 -Math.PI / 2 + 2 * Math.PI / 3,
74 -Math.PI / 2 + 4 * Math.PI / 3,
75 ];
76
77 function buildBranch(px, py, angle, depth, maxDepth, branchIdx, spreadAngle) {
78 if (depth > maxDepth) return;
79
80 const scale = Math.pow(decay, depth - 1);
81 const len = baseLen * scale;
82 const width = baseWidth * scale;
83 const nx = px + Math.cos(angle) * len;
84 const ny = py + Math.sin(angle) * len;
85
86 const d = delay;
87 delay += 30;
88
89 edges.push({ x1: px, y1: py, x2: nx, y2: ny, color: branchColors[branchIdx], width, delay: d });
90
91 const childSpread = spreadAngle * 0.82;
92 const offsets = [-childSpread / 2, childSpread / 2];
93
94 for (const off of offsets) {
95 buildBranch(nx, ny, angle + off, depth + 1, maxDepth, branchIdx, childSpread);
96 }
97 }
98
99 delay = 50;
100
101 const depth = 6;
102 const spread = Math.PI * 0.68;
103
104 for (let i = 0; i < 3; i++) {
105 buildBranch(cx, cy, branchAngles[i], 1, depth, i, spread);
106 }
107
108 // Render edges
109 for (const e of edges) {
110 const line = document.createElementNS(SVG_NS, "line");
111 line.setAttribute("x1", e.x1);
112 line.setAttribute("y1", e.y1);
113 line.setAttribute("x2", e.x2);
114 line.setAttribute("y2", e.y2);
115 line.setAttribute("stroke", e.color);
116 line.setAttribute("stroke-width", e.width);
117 line.classList.add("edge");
118 line.style.animationDelay = e.delay + "ms";
119 latticeG.appendChild(line);
120 }
121
122 // Black hexagon
123 const r = 24;
124 const hexPoints = [];
125 for (let i = 0; i < 6; i++) {
126 const a = Math.PI / 6 + i * Math.PI / 3;
127 hexPoints.push(`${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`);
128 }
129 const hex = document.createElementNS(SVG_NS, "polygon");
130 hex.setAttribute("points", hexPoints.join(" "));
131 hex.setAttribute("fill", "#1a1a1e");
132 hex.setAttribute("stroke", "#f5f5f0");
133 hex.setAttribute("stroke-width", 7.5);
134 hex.setAttribute("stroke-linejoin", "round");
135 hex.classList.add("center-shape");
136 hex.style.animationDelay = "0ms";
137 latticeG.appendChild(hex);
138
139
140 </script>
141 </body>
142 </html>
143