Code snippet ported from the artist @KilledByAPixel. Check out his stuff
---
format: typebulb/v1
name: Winter
---
**code.tsx**
```tsx
const c = document.querySelector("canvas") as HTMLCanvasElement;
const x = c.getContext("2d") as CanvasRenderingContext2D;
const S = Math.sin;
let t = 0;
// Cache style and dimensions
let color = getComputedStyle(c).color;
const { width, height } = c;
function draw() {
t += 0.01;
// Faster clear: reset transform and clear rect instead of resizing canvas
x.setTransform(1, 0, 0, 1, 0, 0);
x.clearRect(0, 0, width, height);
x.fillStyle = color;
let j = 47, T = 170, s = 1.02, i: number, h: number, w: number, X: number, y: number, r: number;
// Setup Initial State
x.translate(200, 400);
x.scale(0.5, 0.5);
for (; j--; x.scale(s, s)) {
// Hoist j-dependent math out of the nested loop
const j5 = j ** 5;
const j6 = j ** 6;
h = T + j6 % T;
for (i = h; (w = i / 3) > 0.1; i--) {
y = h - i;
X = j5 - t * T;
// Drawing the "structure"
x.fillRect(
(((X) + 500) % 2500) - 500 - (h * y) % w - T,
460 - y,
w,
3 / j ** 0.6
);
// Drawing the "particles" - cache r
r = (i % 5) + 2;
x.clearRect(
(((X + i * T) + 500) % 2500) - 500 + S(t * 3 + i) * 9,
(t * 99 + i ** 1.5) % 460,
r,
r
);
}
}
requestAnimationFrame(draw);
}
draw();
```
**styles.css**
```css
body {
background: #f5f5f5;
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
color: rgba(0, 0, 0, 0.7);
width: 100vw;
height: 100vh;
object-fit: cover;
}
.credit {
position: fixed;
bottom: 10px;
right: 10px;
font-family: sans-serif;
font-size: 14px;
color: rgba(0, 0, 0, 0);
}
/* Force daytime even if system is dark */
html[data-theme="dark"] body { background: #f5f5f5; }
html[data-theme="dark"] canvas { color: rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] .credit { color: rgba(0, 0, 0, 0.5); }
```
**index.html**
```html
<canvas width="1000" height="1000"></canvas>
<div class="credit">
<span>Credit: </span>
<a href="https://x.com/KilledByAPixel" target="_blank">@KilledByAPixel</a>
</div>
```
**config.json**
```json
{
"description": "Code snippet ported from the artist @KilledByAPixel. Check out his stuff"
}
```
**notes.md**
```md
```