Code snippet ported from the artist @yuruyurau. Check out his stuff
---
format: typebulb/v1
name: Jellyfish
---
**code.tsx**
```tsx
const c = document.querySelector("canvas")!;
const x = c.getContext("2d")!;
let t = 0;
function draw() {
c.width = innerWidth; c.height = innerHeight;
const s = Math.min(innerWidth, innerHeight) / 400;
x.fillStyle = getComputedStyle(document.body).backgroundColor;
x.fillRect(0, 0, innerWidth, innerHeight);
x.setTransform(s, 0, 0, s, (innerWidth - 400 * s) / 2, (innerHeight - 400 * s) / 2);
x.fillStyle = getComputedStyle(c).color;
t += Math.PI / 120;
for (let i = 1e4; i--;) {
const y = i / 345, k = (y < 11 ? 6 + Math.sin((y | 0) ^ 8) * 6 : y / 5 + Math.cos(y / 2)) * Math.cos(i - t / 4);
const e = y / 7 - 13, d = Math.hypot(k, e) + Math.sin(e / 4 + t) / 2, z = d / 2 + 1 - t / 2;
const q = y * k / d * (3 + Math.sin(d * 2 + y / 2 - t * 4));
x.fillRect(q + 60 * Math.cos(z) + 200, q * Math.sin(z) + d * 29 - 170, 1, 1);
}
requestAnimationFrame(draw);
}
draw();
```
**styles.css**
```css
body { background: #090909; margin: 0; overflow: hidden; }
canvas { color: rgba(255, 255, 255, 0.38); }
html[data-theme="light"] body { background: #f5f5f5; }
html[data-theme="light"] canvas { color: rgba(0, 0, 0, 0.38); }
.credit {
position: fixed;
bottom: 10px;
right: 10px;
font-family: sans-serif;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
html[data-theme="light"] .credit { color: rgba(0, 0, 0, 0.5); }
```
**index.html**
```html
<canvas></canvas>
<div class="credit">credit: ア @yuruyurau</div>
```
**config.json**
```json
{
"description": "Code snippet ported from the artist @yuruyurau. Check out his stuff"
}
```