-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathladybug.html
More file actions
114 lines (106 loc) · 6.32 KB
/
ladybug.html
File metadata and controls
114 lines (106 loc) · 6.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
{{- /* Ladybug easter egg — home page only; hidden until “Beta” is clicked (see ladybug.js) */ -}}
<div id="ladybug-container" class="ladybug-gate-hidden" aria-hidden="true" role="presentation">
<svg viewBox="0 0 100 100" width="100%" height="100%">
<!-- Legs: 3 pill segments / side (inspired by horizontal “elbow” stack); CSS animates .ladybug-leg-swing -->
<g class="ladybug-legs" fill="#0f172a">
<!-- Left: middle bar + upper/lower with ±20° like reference; hip at translate -->
<g transform="translate(20,30)">
<g class="ladybug-leg-swing ladybug-leg-l1">
<g transform="rotate(-20)"><rect x="-8.5" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
<rect x="-14" y="-1.2" width="14" height="2.4" rx="1.2" />
<g transform="rotate(20)"><rect x="-8.5" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
</g>
</g>
<g transform="translate(15,50)">
<g class="ladybug-leg-swing ladybug-leg-l2">
<g transform="rotate(-20)"><rect x="-8.5" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
<rect x="-14" y="-1.2" width="14" height="2.4" rx="1.2" />
<g transform="rotate(20)"><rect x="-8.5" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
</g>
</g>
<g transform="translate(20,70)">
<g class="ladybug-leg-swing ladybug-leg-l3">
<g transform="rotate(-20)"><rect x="-8.5" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
<rect x="-14" y="-1.2" width="14" height="2.4" rx="1.2" />
<g transform="rotate(20)"><rect x="-8.5" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
</g>
</g>
<!-- Right: mirrored -->
<g transform="translate(80,30)">
<g class="ladybug-leg-swing ladybug-leg-r1">
<g transform="rotate(20)"><rect x="0" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
<rect x="0" y="-1.2" width="14" height="2.4" rx="1.2" />
<g transform="rotate(-20)"><rect x="0" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
</g>
</g>
<g transform="translate(85,50)">
<g class="ladybug-leg-swing ladybug-leg-r2">
<g transform="rotate(20)"><rect x="0" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
<rect x="0" y="-1.2" width="14" height="2.4" rx="1.2" />
<g transform="rotate(-20)"><rect x="0" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
</g>
</g>
<g transform="translate(80,70)">
<g class="ladybug-leg-swing ladybug-leg-r3">
<g transform="rotate(20)"><rect x="0" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
<rect x="0" y="-1.2" width="14" height="2.4" rx="1.2" />
<g transform="rotate(-20)"><rect x="0" y="-1.2" width="8.5" height="2.4" rx="1.2" /></g>
</g>
</g>
</g>
<!-- Head -->
<circle cx="50" cy="15" r="14" fill="#1e293b" />
<circle cx="45" cy="12.5" r="1.3" fill="#f8fafc" opacity="0.6" />
<circle cx="55" cy="12.5" r="1.3" fill="#f8fafc" opacity="0.6" />
<!-- Antennae -->
<path d="M 43 5 Q 35 -10 20 -5" stroke="#1e293b" stroke-width="2.5" fill="none" stroke-linecap="round" />
<path d="M 57 5 Q 65 -10 80 -5" stroke="#1e293b" stroke-width="2.5" fill="none" stroke-linecap="round" />
<!-- Abdomen (visible when wings open) -->
<ellipse cx="50" cy="60" rx="30" ry="38" fill="#0f172a" />
<!-- Wings (flap when flying) -->
<g class="ladybug-wing ladybug-wing-left">
<path d="M 50 30 C -10 30, 0 110, 50 100 Z" fill="#cbd5e1" />
<path d="M 50 34 C 10 40, 18 90, 49 95 Z" fill="#94a3b8" opacity="0.14" />
</g>
<g class="ladybug-wing ladybug-wing-right">
<path d="M 50 30 C 110 30, 100 110, 50 100 Z" fill="#cbd5e1" />
<path d="M 50 34 C 90 40, 82 90, 51 95 Z" fill="#94a3b8" opacity="0.14" />
</g>
<!-- Pronotum (black patch behind head) -->
<path d="M 25 35 Q 50 20 75 35 Z" fill="#1e293b" />
<!-- Left shell: sheen under spots; black spots of varied size (typical elytra pattern) -->
<g class="ladybug-shell ladybug-shell-left">
<path d="M 50 12 A 36 43 0 0 0 50 98 Z" fill="#dc2626" />
<path d="M 46.5 15 A 31 38 0 0 0 46.5 93" stroke="#991b1b" stroke-width="1.2" fill="none" opacity="0.25" />
<path d="M 14 55 Q 32 35 50 35 L 50 55 Z" fill="#f8fafc" opacity="0.12" />
<g class="ladybug-shell-spots" fill="#0a0a0a">
<circle cx="34" cy="30" r="3.2" />
<circle cx="28" cy="40" r="2.4" />
<circle cx="32" cy="50" r="4.8" />
<circle cx="26" cy="64" r="3.4" />
<circle cx="32" cy="75" r="4.2" />
<circle cx="25" cy="80" r="2.2" />
<circle cx="40" cy="86" r="3.5" />
<circle cx="36" cy="58" r="2" />
</g>
</g>
<!-- Right shell: mirrored spot layout -->
<g class="ladybug-shell ladybug-shell-right">
<path d="M 50 12 A 36 43 0 0 1 50 98 Z" fill="#dc2626" />
<path d="M 53.5 15 A 31 38 0 0 1 53.5 93" stroke="#991b1b" stroke-width="1.2" fill="none" opacity="0.25" />
<path d="M 86 55 Q 68 35 50 35 L 50 55 Z" fill="#f8fafc" opacity="0.12" />
<g class="ladybug-shell-spots" fill="#0a0a0a">
<circle cx="66" cy="30" r="3.2" />
<circle cx="72" cy="40" r="2.4" />
<circle cx="68" cy="50" r="4.8" />
<circle cx="74" cy="64" r="3.4" />
<circle cx="68" cy="75" r="4.2" />
<circle cx="75" cy="80" r="2.2" />
<circle cx="60" cy="86" r="3.5" />
<circle cx="64" cy="58" r="2" />
</g>
</g>
</svg>
</div>
<div id="ladybug-particles-host" class="ladybug-gate-hidden" aria-hidden="true" role="presentation"></div>
<div id="ladybug-message" class="ladybug-gate-hidden" aria-hidden="true" role="presentation"></div>