---
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"
}
```