sign in →

storage is more expensive than ever, it’s time to...

SHRINK

fit a one-liner app under 3kb•get cool stuff & stickers

Start Now!

Screw Hosting.
Screw Files.

Data URI is a web standard that allows you to embed inline data (like documents, images, or code) directly into a text string instead of linking to an external server.

A tiny space-shooter game running straight from a data URI in the browser
data:text/html,<body%20style=margin:0;overflow:hidden;background:%23001;cursor:crosshair><canvas%20id=c></canvas><script>X=c.getContext('2d');W=c.width=innerWidth;H=c.height=innerHeight;M=Math;R=M.random;B=[];E=[];P=[];S=[];s=G=D=F=T=0;x=u=W/2;y=v=H/2;K={};for(i=0;i<200;i++)S.push([R()*2e3,R()*2e3,R()*2]);onkeydown=e=>K[e.key.toLowerCase()]=1;onkeyup=e=>K[e.key.toLowerCase()]=0;onmousemove=e=>{u=e.clientX;v=e.clientY};onmousedown=_=>D=1;onmouseup=_=>D=0;O=k=>X.globalCompositeOperation=k;function%20Z(t){A=self.A||new%20AudioContext;A.resume();o=A.createOscillator();g=A.createGain();n=A.currentTime;o.connect(g).connect(A.destination);f=o.frequency;q=g.gain;o.type=t?'square':'sawtooth';o.start(n);if(t<2){d=t?.1:.3;f.setValueAtTime(t?800:100,n);f.exponentialRampToValueAtTime(t?100:10,n+d);q.setValueAtTime(t?.1:.2,n);q.exponentialRampToValueAtTime(.01,n+d);o.stop(n+d)}else{[247,349,0,349,349,330,294,262].map((h,i)=>{q.setValueAtTime(h?.1:0,n+i*.12);h&&f.setValueAtTime(h,n+i*.12)});q.setTargetAtTime(0,n+.96,.1);o.stop(n+1.5)}}function%20Q(c,p,q,r,k,j){X.fillStyle=c;X.save();X.translate(p,q);X.rotate(r);X.beginPath();for(j=0;j<k.length;)X.lineTo(k[j++],k[j++]);X.fill();X.restore()}function%20L(){T++;O('source-over');X.fillStyle='rgba(5,5,15,.4)';X.fillRect(0,0,W,H);for(a%20of%20S){X.fillStyle=`rgba(255,255,255,${.2+M.sin(T/20+a[0])/5})`;X.fillRect(((a[0]-x/2)%25W+W)%25W,((a[1]-y/2)%25H+H)%25H,a[2],a[2])}O('lighter');if(G){X.fillStyle='%23f55';X.font='bold%2050px%20monospace';X.fillText('GAME%20OVER',W/2-130,H/2);X.fillStyle='white';X.font='20px%20monospace';X.fillText('Final%20Score:%20'+s,W/2-80,H/2+40);return}K.w&&y>20&&(y-=6);K.s&&y<H-20&&(y+=6);K.a&&x>20&&(x-=6);K.d&&x<W-20&&(x+=6);a=M.atan2(v-y,u-x);if(D&&F<1){B.push({x,y,u:M.cos(a)*18,v:M.sin(a)*18,l:60});Z(1);F=6}F--;if(R()<.04){b=R()*6.28;r=M.max(W,H)*.8;E.push({x:W/2+M.cos(b)*r,y:H/2+M.sin(b)*r,s:1.2+R()*2,a:R()*6.28,r:(R()-.5)/10,t:R()>.5})}for(i=B.length;i--;){b=B[i];b.x+=b.u;b.y+=b.v;X.fillStyle='cyan';X.beginPath();X.arc(b.x,b.y,5,0,7);X.fill();if(b.x<0||b.x>W||b.y<0||b.y>H||--b.l<1)B.splice(i,1)}for(i=E.length;i--;){e=E[i];b=M.atan2(y-e.y,x-e.x);e.x+=M.cos(b)*e.s;e.y+=M.sin(b)*e.s;Q('%23f0f',e.x,e.y,e.a+=e.r,e.t?[18,0,-10,10,-10,-10]:[0,-18,18,0,0,18,-18,0]);if(M.hypot(e.x-x,e.y-y)<25){G||Z(2);G=1}for(j=B.length;j--;)if(M.hypot(e.x-B[j].x,e.y-B[j].y)<30){for(m=25;m--;)P.push({x:e.x,y:e.y,u:(R()-.5)*15,v:(R()-.5)*15,l:30});E.splice(i,1);B.splice(j,1);s+=10;Z(0);break}}for(i=P.length;i--;){p=P[i];p.x+=p.u*=.96;p.y+=p.v*=.96;X.fillStyle=`rgba(255,100,255,${--p.l/30})`;X.fillRect(p.x,p.y,4,4);p.l<0&&P.splice(i,1)}Q('lime',x,y,a,[18,0,-12,-12,-8,0,-12,12]);O('source-over');X.fillStyle='white';X.font='bold%2020px%20monospace';X.fillText('SCORE:%20'+s,20,40);requestAnimationFrame(L)}L()</script>

Try it yourself

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style=margin:0;overflow:hidden;background:%23001;cursor:crosshair><canvas%20id=c></canvas><script>X=c.getContext('2d');W=c.width=innerWidth;H=c.height=innerHeight;M=Math;R=M.random;B=[];E=[];P=[];S=[];s=G=D=F=T=0;x=u=W/2;y=v=H/2;K={};for(i=0;i<200;i++)S.push([R()*2e3,R()*2e3,R()*2]);onkeydown=e=>K[e.key.toLowerCase()]=1;onkeyup=e=>K[e.key.toLowerCase()]=0;onmousemove=e=>{u=e.clientX;v=e.clientY};onmousedown=_=>D=1;onmouseup=_=>D=0;O=k=>X.globalCompositeOperation=k;function%20Z(t){A=self.A||new%20AudioContext;A.resume();o=A.createOscillator();g=A.createGain();n=A.currentTime;o.connect(g).connect(A.destination);f=o.frequency;q=g.gain;o.type=t?'square':'sawtooth';o.start(n);if(t<2){d=t?.1:.3;f.setValueAtTime(t?800:100,n);f.exponentialRampToValueAtTime(t?100:10,n+d);q.setValueAtTime(t?.1:.2,n);q.exponentialRampToValueAtTime(.01,n+d);o.stop(n+d)}else{[247,349,0,349,349,330,294,262].map((h,i)=>{q.setValueAtTime(h?.1:0,n+i*.12);h&&f.setValueAtTime(h,n+i*.12)});q.setTargetAtTime(0,n+.96,.1);o.stop(n+1.5)}}function%20Q(c,p,q,r,k,j){X.fillStyle=c;X.save();X.translate(p,q);X.rotate(r);X.beginPath();for(j=0;j<k.length;)X.lineTo(k[j++],k[j++]);X.fill();X.restore()}function%20L(){T++;O('source-over');X.fillStyle='rgba(5,5,15,.4)';X.fillRect(0,0,W,H);for(a%20of%20S){X.fillStyle=`rgba(255,255,255,${.2+M.sin(T/20+a[0])/5})`;X.fillRect(((a[0]-x/2)%25W+W)%25W,((a[1]-y/2)%25H+H)%25H,a[2],a[2])}O('lighter');if(G){X.fillStyle='%23f55';X.font='bold%2050px%20monospace';X.fillText('GAME%20OVER',W/2-130,H/2);X.fillStyle='white';X.font='20px%20monospace';X.fillText('Final%20Score:%20'+s,W/2-80,H/2+40);return}K.w&&y>20&&(y-=6);K.s&&y<H-20&&(y+=6);K.a&&x>20&&(x-=6);K.d&&x<W-20&&(x+=6);a=M.atan2(v-y,u-x);if(D&&F<1){B.push({x,y,u:M.cos(a)*18,v:M.sin(a)*18,l:60});Z(1);F=6}F--;if(R()<.04){b=R()*6.28;r=M.max(W,H)*.8;E.push({x:W/2+M.cos(b)*r,y:H/2+M.sin(b)*r,s:1.2+R()*2,a:R()*6.28,r:(R()-.5)/10,t:R()>.5})}for(i=B.length;i--;){b=B[i];b.x+=b.u;b.y+=b.v;X.fillStyle='cyan';X.beginPath();X.arc(b.x,b.y,5,0,7);X.fill();if(b.x<0||b.x>W||b.y<0||b.y>H||--b.l<1)B.splice(i,1)}for(i=E.length;i--;){e=E[i];b=M.atan2(y-e.y,x-e.x);e.x+=M.cos(b)*e.s;e.y+=M.sin(b)*e.s;Q('%23f0f',e.x,e.y,e.a+=e.r,e.t?[18,0,-10,10,-10,-10]:[0,-18,18,0,0,18,-18,0]);if(M.hypot(e.x-x,e.y-y)<25){G||Z(2);G=1}for(j=B.length;j--;)if(M.hypot(e.x-B[j].x,e.y-B[j].y)<30){for(m=25;m--;)P.push({x:e.x,y:e.y,u:(R()-.5)*15,v:(R()-.5)*15,l:30});E.splice(i,1);B.splice(j,1);s+=10;Z(0);break}}for(i=P.length;i--;){p=P[i];p.x+=p.u*=.96;p.y+=p.v*=.96;X.fillStyle=`rgba(255,100,255,${--p.l/30})`;X.fillRect(p.x,p.y,4,4);p.l<0&&P.splice(i,1)}Q('lime',x,y,a,[18,0,-12,-12,-8,0,-12,12]);O('source-over');X.fillStyle='white';X.font='bold%2020px%20monospace';X.fillText('SCORE:%20'+s,20,40);requestAnimationFrame(L)}L()</script>

How does it work?

SHRINK is a You Ship We Ship where you create a one-line web app within 3kb, without relying on external resources (like images on a CDN, or script hosted elsewhere), and use creative things like maths to make things appear (with canvas) and sounds to play (with the web audio API).

Don’t know what to make? What about:

  • A synthesizer: build a playable instrument with UI in 3KB
  • A audio visualizer: mic input, something reacts to your voice or music
  • A rhythm game: four keys and procedural beats!
  • A morse code translator: type text and hear it beeped back at you!
  • A tiny game: snake or pong? and use the Web Audio API!

And earn awesome prizes!

You earn 1 BITE per hour for up to 6 per project! However implementing specific features raises your cap :p

NFC stickers

NFC Stickers

2 BITES
A pack of programmable NFC stickers.
Debugger rubber duckie

debuggerrubber duckie

2 BITES
A rubber duck for rubber duck debugging.
Floppy disk

floppy disk

2 BITES
A 3.5" 1.44MB floppy disk.
Hack Club sticker pack

sticker pack

2 BITES
A pack of Hack Club stickers.
Hack Club magazine

the magazine

2 BITES
The 2025 Hack Club magazine.
Domain for a year

$12 domaingrant

2 BITES
$12 grant toward a domain for one year.
XIAO ESP32

XIAO ESP32

3 BITES
Seeed Studio XIAO ESP32, a thumb-sized board with Wi-Fi and Bluetooth.
Orpheus Pico

Orpheus Pico

3 BITES
Hack Club's RP2040 microcontroller board.
Micro plushie

micro plushie

3 BITES
A small plush toy.
Blåhaj

Blåhaj

6 BITES
The IKEA Blåhaj shark plush.
Balatro

Balatro

3 BITES
A Steam key for Balatro.
Steam or GOG gift card

$10 gamecard

2 BITES
$10 Steam or GOG.com gift card.
Tiny Lego set

tiny Lego

3 BITES
Any LEGO set up to $12.
Hack Club socks

Hack Clubsocks

4 BITES
A pair of Hack Club socks.
Tamagotchi

Tamagotchi

5 BITES
An original Tamagotchi virtual pet.
Raspberry Pi Zero 2 W

Raspberry PiZero 2 W

5 BITES
Raspberry Pi Zero 2 W with header and case.
Badger 2040 W

Badger 2040 W

5 BITES
Pimoroni Badger 2040 W, a programmable e-ink badge with Wi-Fi.
Mini claw machine

mini clawmachine

5 BITES
A mini desktop claw machine.
Thumby

Thumby

6 BITES
A keychain-sized game console you program in Python.
Thermal printer

thermalprinter

7 BITES
A small thermal receipt printer.
Retro handheld

retrohandheld

11 BITES
A retro handheld up to $60, such as the Miyoo Mini Plus.
Mechanical keyboard

mechanicalkeyboard

15 BITES
Any mechanical keyboard up to $90.

Plus a free SHRINK sticker sheet with your first ship!

Still stuck? Check these out:

Space fighter

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style=margin:0;overflow:hidden;background:%23001;cursor:crosshair><canvas%20id=c></canvas><script>X=c.getContext('2d');W=c.width=innerWidth;H=c.height=innerHeight;M=Math;R=M.random;B=[];E=[];P=[];S=[];s=G=D=F=T=0;x=u=W/2;y=v=H/2;K={};for(i=0;i<200;i++)S.push([R()*2e3,R()*2e3,R()*2]);onkeydown=e=>K[e.key.toLowerCase()]=1;onkeyup=e=>K[e.key.toLowerCase()]=0;onmousemove=e=>{u=e.clientX;v=e.clientY};onmousedown=_=>D=1;onmouseup=_=>D=0;O=k=>X.globalCompositeOperation=k;function%20Z(t){A=self.A||new%20AudioContext;A.resume();o=A.createOscillator();g=A.createGain();n=A.currentTime;o.connect(g).connect(A.destination);f=o.frequency;q=g.gain;o.type=t?'square':'sawtooth';o.start(n);if(t<2){d=t?.1:.3;f.setValueAtTime(t?800:100,n);f.exponentialRampToValueAtTime(t?100:10,n+d);q.setValueAtTime(t?.1:.2,n);q.exponentialRampToValueAtTime(.01,n+d);o.stop(n+d)}else{[247,349,0,349,349,330,294,262].map((h,i)=>{q.setValueAtTime(h?.1:0,n+i*.12);h&&f.setValueAtTime(h,n+i*.12)});q.setTargetAtTime(0,n+.96,.1);o.stop(n+1.5)}}function%20Q(c,p,q,r,k,j){X.fillStyle=c;X.save();X.translate(p,q);X.rotate(r);X.beginPath();for(j=0;j<k.length;)X.lineTo(k[j++],k[j++]);X.fill();X.restore()}function%20L(){T++;O('source-over');X.fillStyle='rgba(5,5,15,.4)';X.fillRect(0,0,W,H);for(a%20of%20S){X.fillStyle=`rgba(255,255,255,${.2+M.sin(T/20+a[0])/5})`;X.fillRect(((a[0]-x/2)%25W+W)%25W,((a[1]-y/2)%25H+H)%25H,a[2],a[2])}O('lighter');if(G){X.fillStyle='%23f55';X.font='bold%2050px%20monospace';X.fillText('GAME%20OVER',W/2-130,H/2);X.fillStyle='white';X.font='20px%20monospace';X.fillText('Final%20Score:%20'+s,W/2-80,H/2+40);return}K.w&&y>20&&(y-=6);K.s&&y<H-20&&(y+=6);K.a&&x>20&&(x-=6);K.d&&x<W-20&&(x+=6);a=M.atan2(v-y,u-x);if(D&&F<1){B.push({x,y,u:M.cos(a)*18,v:M.sin(a)*18,l:60});Z(1);F=6}F--;if(R()<.04){b=R()*6.28;r=M.max(W,H)*.8;E.push({x:W/2+M.cos(b)*r,y:H/2+M.sin(b)*r,s:1.2+R()*2,a:R()*6.28,r:(R()-.5)/10,t:R()>.5})}for(i=B.length;i--;){b=B[i];b.x+=b.u;b.y+=b.v;X.fillStyle='cyan';X.beginPath();X.arc(b.x,b.y,5,0,7);X.fill();if(b.x<0||b.x>W||b.y<0||b.y>H||--b.l<1)B.splice(i,1)}for(i=E.length;i--;){e=E[i];b=M.atan2(y-e.y,x-e.x);e.x+=M.cos(b)*e.s;e.y+=M.sin(b)*e.s;Q('%23f0f',e.x,e.y,e.a+=e.r,e.t?[18,0,-10,10,-10,-10]:[0,-18,18,0,0,18,-18,0]);if(M.hypot(e.x-x,e.y-y)<25){G||Z(2);G=1}for(j=B.length;j--;)if(M.hypot(e.x-B[j].x,e.y-B[j].y)<30){for(m=25;m--;)P.push({x:e.x,y:e.y,u:(R()-.5)*15,v:(R()-.5)*15,l:30});E.splice(i,1);B.splice(j,1);s+=10;Z(0);break}}for(i=P.length;i--;){p=P[i];p.x+=p.u*=.96;p.y+=p.v*=.96;X.fillStyle=`rgba(255,100,255,${--p.l/30})`;X.fillRect(p.x,p.y,4,4);p.l<0&&P.splice(i,1)}Q('lime',x,y,a,[18,0,-12,-12,-8,0,-12,12]);O('source-over');X.fillStyle='white';X.font='bold%2020px%20monospace';X.fillText('SCORE:%20'+s,20,40);requestAnimationFrame(L)}L()</script>

Flappy square

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,%3Cbody%20style%3D%22margin%3A0%3Boverflow%3Ahidden%3Bbackground%3A%2370c5ce%3Bfont-family%3Asans-serif%3Buser-select%3Anone%22%3E%3Ccanvas%20id%3D%22g%22%3E%3C%2Fcanvas%3E%3Cscript%3Es%3Dg.getContext(%222d%22)%3B%20h%3D0%3B%20f%3D()%3D%3E%7Bb%3D%7Bx%3A50%2Cy%3A150%2Cv%3A0%7D%3Bp%3D%5B%5D%3Bsc%3D0%3Bgo%3D0%7D%3Bf()%3BsetInterval(()%3D%3E%7Bif(go)return%3Bg.width%3DinnerWidth%3Bg.height%3DinnerHeight%3Bb.v%2B%3D.4%3Bb.y%2B%3Db.v%3Bs.save()%3Bs.translate(b.x%2Cb.y)%3Bs.rotate(Math.min(1.5%2CMath.max(-1.5%2Cb.v%2F10)))%3Bs.fillStyle%3D%22yellow%22%3Bs.fillRect(-15%2C-15%2C30%2C30)%3Bs.restore()%3Bif(p.length%3D%3D0%7C%7Cp%5Bp.length-1%5D.x%3Cg.width-300)p.push(%7Bx%3Ag.width%2Cy%3AMath.random()*(g.height-300)%2B150%7D)%3Bs.fillStyle%3D%22green%22%3Bp.map(o%3D%3E%7Bo.x-%3D4%3Bs.fillRect(o.x%2C0%2C60%2Co.y-100)%3Bs.fillRect(o.x%2Co.y%2B100%2C60%2Cg.height)%3Bif(o.x%3D%3D48)sc%2B%2B%3Bif(o.x%3Cb.x%2B15%26%26o.x%2B60%3Eb.x-15%26%26(b.y%3Co.y-100%7C%7Cb.y%3Eo.y%2B100)%7C%7Cb.y%3Eg.height)go%3D1%7D)%3Bif(sc%3Eh)h%3Dsc%3Bs.fillStyle%3D%22white%22%3Bs.font%3D%22bold%2030px%20Arial%22%3Bs.fillText(%22Score%3A%20%22%2Bsc%2B%22%20%20HI%3A%20%22%2Bh%2C20%2C50)%3Bif(go)%7Bs.textAlign%3D%22center%22%3Bs.fillText(%22GAME%20OVER%22%2Cg.width%2F2%2Cg.height%2F2)%3Bs.font%3D%2220px%20Arial%22%3Bs.fillText(%22Click%20to%20Restart%22%2Cg.width%2F2%2Cg.height%2F2%2B40)%7D%7D%2C20)%3Bonclick%3D()%3D%3Ego%3Ff()%3Ab.v%3D-8%3C%2Fscript%3E%3C%2Fbody%3E

Piano

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;display:flex;height:100vh;background:%23222;align-items:center;justify-content:center"><div%20id="k"%20style="position:relative;display:flex"></div><script>let%20A=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();let%20w=0;for(let%20i=0;i<15;i++){let%20B=[1,3,6,8,10,13].includes(i);let%20d=document.createElement("div");d.style=B?%22width:30px;height:110px;background:%23111;position:absolute;left:%22%2B(w-15)%2B%22px;z-index:1;border-radius:0%200%204px%204px;cursor:pointer%22:%22width:48px;height:180px;background:%23f4f4f4;border:1px%20solid%20%23aaa;border-radius:0%200%204px%204px;cursor:pointer%22;d.onmousedown=d.ontouchstart=(e)=%3E{e.preventDefault();if(A.state===%27suspended%27)A.resume();let%20o=A.createOscillator(),g=A.createGain();o.connect(g);g.connect(A.destination);o.type=%22triangle%22;o.frequency.value=440*Math.pow(2,(i-9)/12);o.start();g.gain.setValueAtTime(1,A.currentTime);g.gain.exponentialRampToValueAtTime(0.0001,A.currentTime%2B1.5);setTimeout(()=%3Eo.stop(),1500);d.style.background=B?%22%23444%22:%22%23ccc%22;setTimeout(()=%3Ed.style.background=B?%22%23111%22:%22%23f4f4f4%22,150)};k.appendChild(d);if(!B)w=w%2B50;}%3C/script%3E%3C/body%3E

Audio visualizer

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23000;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden"><canvas%20id="c"%20style="position:absolute;width:100vw;height:100vh"></canvas><input%20type="file"%20id="f"%20accept="audio/*"%20style="z-index:1;color:%23fff;font-family:sans-serif;background:rgba(255,255,255,0.2);padding:15px;border-radius:8px;cursor:pointer"><script>let%20x=c.getContext('2d'),A,S,N;c.width=innerWidth;c.height=innerHeight;let%20u=new%20Audio();f.onchange=e=>{u.src=URL.createObjectURL(e.target.files[0]);u.play();if(!A){A=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();S=A.createMediaElementSource(u);N=A.createAnalyser();N.fftSize=256;S.connect(N);N.connect(A.destination);D()}};function%20D(){requestAnimationFrame(D);let%20d=new%20Uint8Array(128);N.getByteFrequencyData(d);x.fillStyle='rgba(0,0,0,0.2)';x.fillRect(0,0,c.width,c.height);let%20w=c.width/128;for(let%20i=0;i<128;i%2B%2B){let%20h=d[i]/255*c.height;x.fillStyle='hsl('%2B(i*2.8)%2B',100%25,50%25)';x.fillRect(i*w,c.height-h,w-1,h)}}</script></body>

Snake

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23111;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:%23fff;font:20px%20monospace"><canvas%20id=c%20width=400%20height=400%20style="background:%23000;border:2px%20solid%20%234f4;max-width:90vw"></canvas><p%20id=t></p><script>let%20x=c.getContext('2d'),s=[[10,10]],d=[1,0],n=[1,0],f=[15,10],A;onkeydown=e=>{let%20k={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]}[e.key];if(k&&k[0]!=-d[0]&&k[1]!=-d[1]){n=k;e.preventDefault()}};function%20b(q){A=A%7C%7Cnew%20AudioContext;let%20o=A.createOscillator(),g=A.createGain(),T=A.currentTime;o.type='square';o.frequency.value=q;o.connect(g).connect(A.destination);g.gain.setValueAtTime(.1,T);g.gain.exponentialRampToValueAtTime(.001,T+.15);o.start();o.stop(T+.15)}setInterval(()=>{d=n;let%20h=[(s[0][0]+d[0]+20)%2520,(s[0][1]+d[1]+20)%2520];if(s.some(p=>p[0]==h[0]&&p[1]==h[1])){b(110);s=[];d=n=[1,0];h=[10,10]}s.unshift(h);if(h[0]==f[0]&&h[1]==f[1]){b(660+s.length*20);f=[Math.random()*20%7C0,Math.random()*20%7C0]}else%20if(s.length>1)s.pop();x.fillStyle='%23000';x.fillRect(0,0,400,400);x.fillStyle='%23f44';x.fillRect(f[0]*20+1,f[1]*20+1,18,18);s.map((p,i)=>{x.fillStyle=`hsl(${120+i*6},90%25,55%25)`;x.fillRect(p[0]*20+1,p[1]*20+1,18,18)});t.textContent='score%20'+(s.length-1)+'%20(arrow%20keys)'},110)</script>

Morse beeper

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%230b1a2b;color:%23ffd166;font:24px%20monospace;display:grid;place-items:center;height:100vh;text-align:center"><div><input%20id=i%20placeholder="type%20something"%20style="font:inherit;padding:10px;width:80vw;max-width:520px;background:%23000;color:%23fff;border:2px%20solid%20%23ffd166"><p%20id=o%20style="min-height:2em;max-width:80vw;word-break:break-all;letter-spacing:.1em"></p><button%20id=b%20style="font:inherit;padding:8px%2024px;background:%23ffd166;border:0;cursor:pointer">beep%20it</button></div><script>let%20M={},A;'A.-B-...C-.-.D-..E.F..-.G--.H....I..J.---K-.-L.-..M--N-.O---P.--.Q--.-R.-.S...T-U..-V...-W.--X-..-Y-.--Z--..1.----2..---3...--4....-5.....6-....7--...8---..9----.0-----'.replace(/([A-Z0-9])([.-]+)/g,(_,k,v)=>M[k]=v);i.oninput=()=>o.textContent=[...i.value.toUpperCase()].map(c=>c=='%20'?'/':M[c]%7C%7C'').join('%20');b.onclick=()=>{A=A%7C%7Cnew%20AudioContext;let%20s=A.createOscillator(),g=A.createGain(),t=A.currentTime+.1,u=.08;s.frequency.value=600;g.gain.value=0;s.connect(g).connect(A.destination);for(let%20c%20of%20o.textContent){if(c=='.'%7C%7Cc=='-'){g.gain.setValueAtTime(.3,t);t+=c=='.'?u:3*u;g.gain.setValueAtTime(0,t);t+=u}else%20t+=c=='/'?4*u:2*u}s.start();s.stop(t)}</script>

Plasma

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23000;overflow:hidden"><canvas%20id=c%20width=160%20height=90%20style="width:100vw;height:100vh;image-rendering:pixelated"></canvas><script>let%20x=c.getContext('2d'),d=x.createImageData(160,90),t=0,mx=80,my=45;onmousemove=e=>{mx=e.clientX/innerWidth*160;my=e.clientY/innerHeight*90};(function%20f(){t+=.03;for(let%20y=0;y<90;y++)for(let%20X=0;X<160;X++){let%20v=Math.sin(X/9+t)+Math.sin(y/7-t)+Math.sin((X+y)/12+t)+Math.sin(Math.hypot(X-mx,y-my)/6-t*2),i=(y*160+X)*4;d.data[i]=128+127*Math.sin(v*Math.PI);d.data[i+1]=128+127*Math.sin(v*Math.PI+2);d.data[i+2]=128+127*Math.sin(v*Math.PI+4);d.data[i+3]=255}x.putImageData(d,0,0);requestAnimationFrame(f)})()</script>

Drum machine

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%231d1030;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font:16px%20monospace;color:%23fff"><div%20id=g%20style="display:grid;grid-template-columns:repeat(8,44px);gap:6px"></div><p>click%20anywhere%20to%20start,%20click%20cells%20to%20edit</p><script>let%20A,S=[],p=0,C=['%23f55','%23fc3','%235cf','%23b8f'],B=['10001000','00100010','10101010','01000101'];for(let%20r=0;r<4;r++){S[r]=[];for(let%20s=0;s<8;s++){let%20e=document.createElement('div');e.style.cssText='height:44px;border-radius:6px;cursor:pointer';e.on=+B[r][s];e.onclick=()=>e.on^=1;g.appendChild(S[r][s]=e)}}onclick=()=>A=A%7C%7Cnew%20AudioContext;function%20P(r){let%20t=A.currentTime,g=A.createGain();g.connect(A.destination);if(r==1%7C%7Cr==2){let%20b=A.createBuffer(1,A.sampleRate*.2,A.sampleRate),d=b.getChannelData(0);for(let%20i=0;i<d.length;i++)d[i]=Math.random()*2-1;let%20n=A.createBufferSource(),f=A.createBiquadFilter();n.buffer=b;f.type='highpass';f.frequency.value=r==2?7000:1000;n.connect(f).connect(g);g.gain.setValueAtTime(r==2?.2:.5,t);g.gain.exponentialRampToValueAtTime(.001,t+(r==2?.05:.18));n.start(t)}else{let%20o=A.createOscillator();o.connect(g);if(r==0){o.frequency.setValueAtTime(150,t);o.frequency.exponentialRampToValueAtTime(40,t+.3)}else{o.type='square';o.frequency.value=[440,523,659][Math.random()*3%7C0]}g.gain.setValueAtTime(r?.1:.8,t);g.gain.exponentialRampToValueAtTime(.001,t+.3);o.start(t);o.stop(t+.3)}}setInterval(()=>{S.map((R,r)=>R.map((e,s)=>{e.style.background=e.on?C[r]:'%23333';e.style.opacity=s==p?1:.55;if(s==p&&e.on&&A)P(r)}));p=(p+1)%258},150)</script>

3D cube

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23000;overflow:hidden;touch-action:none"><canvas%20id=c></canvas><script>let%20x=c.getContext('2d'),a=.6,b=.4,va=.01,vb=.007,d=0,t=0,P=[],E=[],w,h,s;for(let%20i=0;i<8;i++)P.push([i&1?1:-1,i&2?1:-1,i&4?1:-1]);for(let%20i=0;i<8;i++)for(let%20j=i+1;j<8;j++)if([1,2,4].includes(i^j))E.push([i,j]);onresize=()=>{w=(c.width=innerWidth)/2;h=(c.height=innerHeight)/2;s=Math.min(w,h)*1.6};onresize();onpointerdown=()=>d=1;onpointerup=()=>d=0;onpointermove=e=>{if(d){vb=e.movementX/150;va=e.movementY/150}};function%20D(k,A,B,C){let%20Q=P.map(([X,Y,Z])=>{X*=k;Y*=k;Z*=k;let%20x1=X*Math.cos(B)-Z*Math.sin(B),z1=X*Math.sin(B)+Z*Math.cos(B),y1=Y*Math.cos(A)-z1*Math.sin(A),z2=Y*Math.sin(A)+z1*Math.cos(A)+3.5;return[w+x1/z2*s,h+y1/z2*s]});x.strokeStyle=x.shadowColor=C;x.beginPath();E.map(([i,j])=>{x.moveTo(...Q[i]);x.lineTo(...Q[j])});x.stroke();Q.map(q=>x.fillRect(q[0]-4,q[1]-4,8,8))}(function%20f(){t++;a+=va;b+=vb;if(!d){va=va*.98+2e-4;vb=vb*.98+14e-5}x.shadowBlur=0;x.fillStyle='rgba(0,0,0,.25)';x.fillRect(0,0,2*w,2*h);x.fillStyle='%23fff';x.font='16px%20monospace';x.fillText('drag%20to%20spin',16,28);x.lineWidth=3;x.shadowBlur=20;D(1,a,b,`hsl(${t}deg%20100%25%2060%25)`);D(.5,-a*1.5,-b*1.5,`hsl(${t+180}deg%20100%25%2060%25)`);requestAnimationFrame(f)})()</script>

Theremin

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;overflow:hidden;background:%23000;color:%23fff;font:16px%20monospace;touch-action:none;user-select:none"><canvas%20id=c%20style="position:fixed;inset:0"></canvas><p%20style="position:fixed;left:16px;top:0;opacity:.6">hold%20the%20mouse%20down:%20left/right%20=%20pitch,%20up/down%20=%20volume</p><script>let%20x=c.getContext('2d'),A,o,g,on=0,px=0,py=0,t=0;onresize=()=>{c.width=innerWidth;c.height=innerHeight};onresize();onpointerdown=e=>{if(!A){A=new%20AudioContext;o=A.createOscillator();g=A.createGain();let%20f=A.createBiquadFilter();o.type='sawtooth';f.frequency.value=1800;g.gain.value=0;o.connect(f).connect(g).connect(A.destination);o.start()}on=1;M(e)};onpointerup=()=>{on=0;g.gain.setTargetAtTime(0,A.currentTime,.05)};onpointermove=M;function%20M(e){px=e.clientX;py=e.clientY;if(on&&A){o.frequency.setTargetAtTime(110*2**(px/innerWidth*3),A.currentTime,.02);g.gain.setTargetAtTime((1-py/innerHeight)*.4,A.currentTime,.02)}}(function%20f(){t+=.1;let%20w=c.width,h=c.height,k=on?.02*2**(px/w*3):0,m=on?(1-py/h)*h*.4:2;x.fillStyle='rgba(0,0,0,.2)';x.fillRect(0,0,w,h);x.strokeStyle=`hsl(${px/w*300},100%25,60%25)`;x.lineWidth=3;x.beginPath();for(let%20X=0;X<=w;X+=4)x.lineTo(X,h/2+m*Math.sin(X*k-t*3));x.stroke();if(on){x.fillStyle='%23fff';x.beginPath();x.arc(px,py,8,0,7);x.fill()}requestAnimationFrame(f)})()</script>

Space fighter

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style=margin:0;overflow:hidden;background:%23001;cursor:crosshair><canvas%20id=c></canvas><script>X=c.getContext('2d');W=c.width=innerWidth;H=c.height=innerHeight;M=Math;R=M.random;B=[];E=[];P=[];S=[];s=G=D=F=T=0;x=u=W/2;y=v=H/2;K={};for(i=0;i<200;i++)S.push([R()*2e3,R()*2e3,R()*2]);onkeydown=e=>K[e.key.toLowerCase()]=1;onkeyup=e=>K[e.key.toLowerCase()]=0;onmousemove=e=>{u=e.clientX;v=e.clientY};onmousedown=_=>D=1;onmouseup=_=>D=0;O=k=>X.globalCompositeOperation=k;function%20Z(t){A=self.A||new%20AudioContext;A.resume();o=A.createOscillator();g=A.createGain();n=A.currentTime;o.connect(g).connect(A.destination);f=o.frequency;q=g.gain;o.type=t?'square':'sawtooth';o.start(n);if(t<2){d=t?.1:.3;f.setValueAtTime(t?800:100,n);f.exponentialRampToValueAtTime(t?100:10,n+d);q.setValueAtTime(t?.1:.2,n);q.exponentialRampToValueAtTime(.01,n+d);o.stop(n+d)}else{[247,349,0,349,349,330,294,262].map((h,i)=>{q.setValueAtTime(h?.1:0,n+i*.12);h&&f.setValueAtTime(h,n+i*.12)});q.setTargetAtTime(0,n+.96,.1);o.stop(n+1.5)}}function%20Q(c,p,q,r,k,j){X.fillStyle=c;X.save();X.translate(p,q);X.rotate(r);X.beginPath();for(j=0;j<k.length;)X.lineTo(k[j++],k[j++]);X.fill();X.restore()}function%20L(){T++;O('source-over');X.fillStyle='rgba(5,5,15,.4)';X.fillRect(0,0,W,H);for(a%20of%20S){X.fillStyle=`rgba(255,255,255,${.2+M.sin(T/20+a[0])/5})`;X.fillRect(((a[0]-x/2)%25W+W)%25W,((a[1]-y/2)%25H+H)%25H,a[2],a[2])}O('lighter');if(G){X.fillStyle='%23f55';X.font='bold%2050px%20monospace';X.fillText('GAME%20OVER',W/2-130,H/2);X.fillStyle='white';X.font='20px%20monospace';X.fillText('Final%20Score:%20'+s,W/2-80,H/2+40);return}K.w&&y>20&&(y-=6);K.s&&y<H-20&&(y+=6);K.a&&x>20&&(x-=6);K.d&&x<W-20&&(x+=6);a=M.atan2(v-y,u-x);if(D&&F<1){B.push({x,y,u:M.cos(a)*18,v:M.sin(a)*18,l:60});Z(1);F=6}F--;if(R()<.04){b=R()*6.28;r=M.max(W,H)*.8;E.push({x:W/2+M.cos(b)*r,y:H/2+M.sin(b)*r,s:1.2+R()*2,a:R()*6.28,r:(R()-.5)/10,t:R()>.5})}for(i=B.length;i--;){b=B[i];b.x+=b.u;b.y+=b.v;X.fillStyle='cyan';X.beginPath();X.arc(b.x,b.y,5,0,7);X.fill();if(b.x<0||b.x>W||b.y<0||b.y>H||--b.l<1)B.splice(i,1)}for(i=E.length;i--;){e=E[i];b=M.atan2(y-e.y,x-e.x);e.x+=M.cos(b)*e.s;e.y+=M.sin(b)*e.s;Q('%23f0f',e.x,e.y,e.a+=e.r,e.t?[18,0,-10,10,-10,-10]:[0,-18,18,0,0,18,-18,0]);if(M.hypot(e.x-x,e.y-y)<25){G||Z(2);G=1}for(j=B.length;j--;)if(M.hypot(e.x-B[j].x,e.y-B[j].y)<30){for(m=25;m--;)P.push({x:e.x,y:e.y,u:(R()-.5)*15,v:(R()-.5)*15,l:30});E.splice(i,1);B.splice(j,1);s+=10;Z(0);break}}for(i=P.length;i--;){p=P[i];p.x+=p.u*=.96;p.y+=p.v*=.96;X.fillStyle=`rgba(255,100,255,${--p.l/30})`;X.fillRect(p.x,p.y,4,4);p.l<0&&P.splice(i,1)}Q('lime',x,y,a,[18,0,-12,-12,-8,0,-12,12]);O('source-over');X.fillStyle='white';X.font='bold%2020px%20monospace';X.fillText('SCORE:%20'+s,20,40);requestAnimationFrame(L)}L()</script>

Flappy square

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,%3Cbody%20style%3D%22margin%3A0%3Boverflow%3Ahidden%3Bbackground%3A%2370c5ce%3Bfont-family%3Asans-serif%3Buser-select%3Anone%22%3E%3Ccanvas%20id%3D%22g%22%3E%3C%2Fcanvas%3E%3Cscript%3Es%3Dg.getContext(%222d%22)%3B%20h%3D0%3B%20f%3D()%3D%3E%7Bb%3D%7Bx%3A50%2Cy%3A150%2Cv%3A0%7D%3Bp%3D%5B%5D%3Bsc%3D0%3Bgo%3D0%7D%3Bf()%3BsetInterval(()%3D%3E%7Bif(go)return%3Bg.width%3DinnerWidth%3Bg.height%3DinnerHeight%3Bb.v%2B%3D.4%3Bb.y%2B%3Db.v%3Bs.save()%3Bs.translate(b.x%2Cb.y)%3Bs.rotate(Math.min(1.5%2CMath.max(-1.5%2Cb.v%2F10)))%3Bs.fillStyle%3D%22yellow%22%3Bs.fillRect(-15%2C-15%2C30%2C30)%3Bs.restore()%3Bif(p.length%3D%3D0%7C%7Cp%5Bp.length-1%5D.x%3Cg.width-300)p.push(%7Bx%3Ag.width%2Cy%3AMath.random()*(g.height-300)%2B150%7D)%3Bs.fillStyle%3D%22green%22%3Bp.map(o%3D%3E%7Bo.x-%3D4%3Bs.fillRect(o.x%2C0%2C60%2Co.y-100)%3Bs.fillRect(o.x%2Co.y%2B100%2C60%2Cg.height)%3Bif(o.x%3D%3D48)sc%2B%2B%3Bif(o.x%3Cb.x%2B15%26%26o.x%2B60%3Eb.x-15%26%26(b.y%3Co.y-100%7C%7Cb.y%3Eo.y%2B100)%7C%7Cb.y%3Eg.height)go%3D1%7D)%3Bif(sc%3Eh)h%3Dsc%3Bs.fillStyle%3D%22white%22%3Bs.font%3D%22bold%2030px%20Arial%22%3Bs.fillText(%22Score%3A%20%22%2Bsc%2B%22%20%20HI%3A%20%22%2Bh%2C20%2C50)%3Bif(go)%7Bs.textAlign%3D%22center%22%3Bs.fillText(%22GAME%20OVER%22%2Cg.width%2F2%2Cg.height%2F2)%3Bs.font%3D%2220px%20Arial%22%3Bs.fillText(%22Click%20to%20Restart%22%2Cg.width%2F2%2Cg.height%2F2%2B40)%7D%7D%2C20)%3Bonclick%3D()%3D%3Ego%3Ff()%3Ab.v%3D-8%3C%2Fscript%3E%3C%2Fbody%3E

Piano

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;display:flex;height:100vh;background:%23222;align-items:center;justify-content:center"><div%20id="k"%20style="position:relative;display:flex"></div><script>let%20A=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();let%20w=0;for(let%20i=0;i<15;i++){let%20B=[1,3,6,8,10,13].includes(i);let%20d=document.createElement("div");d.style=B?%22width:30px;height:110px;background:%23111;position:absolute;left:%22%2B(w-15)%2B%22px;z-index:1;border-radius:0%200%204px%204px;cursor:pointer%22:%22width:48px;height:180px;background:%23f4f4f4;border:1px%20solid%20%23aaa;border-radius:0%200%204px%204px;cursor:pointer%22;d.onmousedown=d.ontouchstart=(e)=%3E{e.preventDefault();if(A.state===%27suspended%27)A.resume();let%20o=A.createOscillator(),g=A.createGain();o.connect(g);g.connect(A.destination);o.type=%22triangle%22;o.frequency.value=440*Math.pow(2,(i-9)/12);o.start();g.gain.setValueAtTime(1,A.currentTime);g.gain.exponentialRampToValueAtTime(0.0001,A.currentTime%2B1.5);setTimeout(()=%3Eo.stop(),1500);d.style.background=B?%22%23444%22:%22%23ccc%22;setTimeout(()=%3Ed.style.background=B?%22%23111%22:%22%23f4f4f4%22,150)};k.appendChild(d);if(!B)w=w%2B50;}%3C/script%3E%3C/body%3E

Audio visualizer

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23000;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden"><canvas%20id="c"%20style="position:absolute;width:100vw;height:100vh"></canvas><input%20type="file"%20id="f"%20accept="audio/*"%20style="z-index:1;color:%23fff;font-family:sans-serif;background:rgba(255,255,255,0.2);padding:15px;border-radius:8px;cursor:pointer"><script>let%20x=c.getContext('2d'),A,S,N;c.width=innerWidth;c.height=innerHeight;let%20u=new%20Audio();f.onchange=e=>{u.src=URL.createObjectURL(e.target.files[0]);u.play();if(!A){A=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();S=A.createMediaElementSource(u);N=A.createAnalyser();N.fftSize=256;S.connect(N);N.connect(A.destination);D()}};function%20D(){requestAnimationFrame(D);let%20d=new%20Uint8Array(128);N.getByteFrequencyData(d);x.fillStyle='rgba(0,0,0,0.2)';x.fillRect(0,0,c.width,c.height);let%20w=c.width/128;for(let%20i=0;i<128;i%2B%2B){let%20h=d[i]/255*c.height;x.fillStyle='hsl('%2B(i*2.8)%2B',100%25,50%25)';x.fillRect(i*w,c.height-h,w-1,h)}}</script></body>

Snake

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23111;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:%23fff;font:20px%20monospace"><canvas%20id=c%20width=400%20height=400%20style="background:%23000;border:2px%20solid%20%234f4;max-width:90vw"></canvas><p%20id=t></p><script>let%20x=c.getContext('2d'),s=[[10,10]],d=[1,0],n=[1,0],f=[15,10],A;onkeydown=e=>{let%20k={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]}[e.key];if(k&&k[0]!=-d[0]&&k[1]!=-d[1]){n=k;e.preventDefault()}};function%20b(q){A=A%7C%7Cnew%20AudioContext;let%20o=A.createOscillator(),g=A.createGain(),T=A.currentTime;o.type='square';o.frequency.value=q;o.connect(g).connect(A.destination);g.gain.setValueAtTime(.1,T);g.gain.exponentialRampToValueAtTime(.001,T+.15);o.start();o.stop(T+.15)}setInterval(()=>{d=n;let%20h=[(s[0][0]+d[0]+20)%2520,(s[0][1]+d[1]+20)%2520];if(s.some(p=>p[0]==h[0]&&p[1]==h[1])){b(110);s=[];d=n=[1,0];h=[10,10]}s.unshift(h);if(h[0]==f[0]&&h[1]==f[1]){b(660+s.length*20);f=[Math.random()*20%7C0,Math.random()*20%7C0]}else%20if(s.length>1)s.pop();x.fillStyle='%23000';x.fillRect(0,0,400,400);x.fillStyle='%23f44';x.fillRect(f[0]*20+1,f[1]*20+1,18,18);s.map((p,i)=>{x.fillStyle=`hsl(${120+i*6},90%25,55%25)`;x.fillRect(p[0]*20+1,p[1]*20+1,18,18)});t.textContent='score%20'+(s.length-1)+'%20(arrow%20keys)'},110)</script>

Morse beeper

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%230b1a2b;color:%23ffd166;font:24px%20monospace;display:grid;place-items:center;height:100vh;text-align:center"><div><input%20id=i%20placeholder="type%20something"%20style="font:inherit;padding:10px;width:80vw;max-width:520px;background:%23000;color:%23fff;border:2px%20solid%20%23ffd166"><p%20id=o%20style="min-height:2em;max-width:80vw;word-break:break-all;letter-spacing:.1em"></p><button%20id=b%20style="font:inherit;padding:8px%2024px;background:%23ffd166;border:0;cursor:pointer">beep%20it</button></div><script>let%20M={},A;'A.-B-...C-.-.D-..E.F..-.G--.H....I..J.---K-.-L.-..M--N-.O---P.--.Q--.-R.-.S...T-U..-V...-W.--X-..-Y-.--Z--..1.----2..---3...--4....-5.....6-....7--...8---..9----.0-----'.replace(/([A-Z0-9])([.-]+)/g,(_,k,v)=>M[k]=v);i.oninput=()=>o.textContent=[...i.value.toUpperCase()].map(c=>c=='%20'?'/':M[c]%7C%7C'').join('%20');b.onclick=()=>{A=A%7C%7Cnew%20AudioContext;let%20s=A.createOscillator(),g=A.createGain(),t=A.currentTime+.1,u=.08;s.frequency.value=600;g.gain.value=0;s.connect(g).connect(A.destination);for(let%20c%20of%20o.textContent){if(c=='.'%7C%7Cc=='-'){g.gain.setValueAtTime(.3,t);t+=c=='.'?u:3*u;g.gain.setValueAtTime(0,t);t+=u}else%20t+=c=='/'?4*u:2*u}s.start();s.stop(t)}</script>

Plasma

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23000;overflow:hidden"><canvas%20id=c%20width=160%20height=90%20style="width:100vw;height:100vh;image-rendering:pixelated"></canvas><script>let%20x=c.getContext('2d'),d=x.createImageData(160,90),t=0,mx=80,my=45;onmousemove=e=>{mx=e.clientX/innerWidth*160;my=e.clientY/innerHeight*90};(function%20f(){t+=.03;for(let%20y=0;y<90;y++)for(let%20X=0;X<160;X++){let%20v=Math.sin(X/9+t)+Math.sin(y/7-t)+Math.sin((X+y)/12+t)+Math.sin(Math.hypot(X-mx,y-my)/6-t*2),i=(y*160+X)*4;d.data[i]=128+127*Math.sin(v*Math.PI);d.data[i+1]=128+127*Math.sin(v*Math.PI+2);d.data[i+2]=128+127*Math.sin(v*Math.PI+4);d.data[i+3]=255}x.putImageData(d,0,0);requestAnimationFrame(f)})()</script>

Drum machine

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%231d1030;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font:16px%20monospace;color:%23fff"><div%20id=g%20style="display:grid;grid-template-columns:repeat(8,44px);gap:6px"></div><p>click%20anywhere%20to%20start,%20click%20cells%20to%20edit</p><script>let%20A,S=[],p=0,C=['%23f55','%23fc3','%235cf','%23b8f'],B=['10001000','00100010','10101010','01000101'];for(let%20r=0;r<4;r++){S[r]=[];for(let%20s=0;s<8;s++){let%20e=document.createElement('div');e.style.cssText='height:44px;border-radius:6px;cursor:pointer';e.on=+B[r][s];e.onclick=()=>e.on^=1;g.appendChild(S[r][s]=e)}}onclick=()=>A=A%7C%7Cnew%20AudioContext;function%20P(r){let%20t=A.currentTime,g=A.createGain();g.connect(A.destination);if(r==1%7C%7Cr==2){let%20b=A.createBuffer(1,A.sampleRate*.2,A.sampleRate),d=b.getChannelData(0);for(let%20i=0;i<d.length;i++)d[i]=Math.random()*2-1;let%20n=A.createBufferSource(),f=A.createBiquadFilter();n.buffer=b;f.type='highpass';f.frequency.value=r==2?7000:1000;n.connect(f).connect(g);g.gain.setValueAtTime(r==2?.2:.5,t);g.gain.exponentialRampToValueAtTime(.001,t+(r==2?.05:.18));n.start(t)}else{let%20o=A.createOscillator();o.connect(g);if(r==0){o.frequency.setValueAtTime(150,t);o.frequency.exponentialRampToValueAtTime(40,t+.3)}else{o.type='square';o.frequency.value=[440,523,659][Math.random()*3%7C0]}g.gain.setValueAtTime(r?.1:.8,t);g.gain.exponentialRampToValueAtTime(.001,t+.3);o.start(t);o.stop(t+.3)}}setInterval(()=>{S.map((R,r)=>R.map((e,s)=>{e.style.background=e.on?C[r]:'%23333';e.style.opacity=s==p?1:.55;if(s==p&&e.on&&A)P(r)}));p=(p+1)%258},150)</script>

3D cube

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;background:%23000;overflow:hidden;touch-action:none"><canvas%20id=c></canvas><script>let%20x=c.getContext('2d'),a=.6,b=.4,va=.01,vb=.007,d=0,t=0,P=[],E=[],w,h,s;for(let%20i=0;i<8;i++)P.push([i&1?1:-1,i&2?1:-1,i&4?1:-1]);for(let%20i=0;i<8;i++)for(let%20j=i+1;j<8;j++)if([1,2,4].includes(i^j))E.push([i,j]);onresize=()=>{w=(c.width=innerWidth)/2;h=(c.height=innerHeight)/2;s=Math.min(w,h)*1.6};onresize();onpointerdown=()=>d=1;onpointerup=()=>d=0;onpointermove=e=>{if(d){vb=e.movementX/150;va=e.movementY/150}};function%20D(k,A,B,C){let%20Q=P.map(([X,Y,Z])=>{X*=k;Y*=k;Z*=k;let%20x1=X*Math.cos(B)-Z*Math.sin(B),z1=X*Math.sin(B)+Z*Math.cos(B),y1=Y*Math.cos(A)-z1*Math.sin(A),z2=Y*Math.sin(A)+z1*Math.cos(A)+3.5;return[w+x1/z2*s,h+y1/z2*s]});x.strokeStyle=x.shadowColor=C;x.beginPath();E.map(([i,j])=>{x.moveTo(...Q[i]);x.lineTo(...Q[j])});x.stroke();Q.map(q=>x.fillRect(q[0]-4,q[1]-4,8,8))}(function%20f(){t++;a+=va;b+=vb;if(!d){va=va*.98+2e-4;vb=vb*.98+14e-5}x.shadowBlur=0;x.fillStyle='rgba(0,0,0,.25)';x.fillRect(0,0,2*w,2*h);x.fillStyle='%23fff';x.font='16px%20monospace';x.fillText('drag%20to%20spin',16,28);x.lineWidth=3;x.shadowBlur=20;D(1,a,b,`hsl(${t}deg%20100%25%2060%25)`);D(.5,-a*1.5,-b*1.5,`hsl(${t+180}deg%20100%25%2060%25)`);requestAnimationFrame(f)})()</script>

Theremin

  1. 1.Copy the URL below.
  2. 2.Open a new tab.
  3. 3.Paste it into the address bar and hit Enter.
the URL
data:text/html,<body%20style="margin:0;overflow:hidden;background:%23000;color:%23fff;font:16px%20monospace;touch-action:none;user-select:none"><canvas%20id=c%20style="position:fixed;inset:0"></canvas><p%20style="position:fixed;left:16px;top:0;opacity:.6">hold%20the%20mouse%20down:%20left/right%20=%20pitch,%20up/down%20=%20volume</p><script>let%20x=c.getContext('2d'),A,o,g,on=0,px=0,py=0,t=0;onresize=()=>{c.width=innerWidth;c.height=innerHeight};onresize();onpointerdown=e=>{if(!A){A=new%20AudioContext;o=A.createOscillator();g=A.createGain();let%20f=A.createBiquadFilter();o.type='sawtooth';f.frequency.value=1800;g.gain.value=0;o.connect(f).connect(g).connect(A.destination);o.start()}on=1;M(e)};onpointerup=()=>{on=0;g.gain.setTargetAtTime(0,A.currentTime,.05)};onpointermove=M;function%20M(e){px=e.clientX;py=e.clientY;if(on&&A){o.frequency.setTargetAtTime(110*2**(px/innerWidth*3),A.currentTime,.02);g.gain.setTargetAtTime((1-py/innerHeight)*.4,A.currentTime,.02)}}(function%20f(){t+=.1;let%20w=c.width,h=c.height,k=on?.02*2**(px/w*3):0,m=on?(1-py/h)*h*.4:2;x.fillStyle='rgba(0,0,0,.2)';x.fillRect(0,0,w,h);x.strokeStyle=`hsl(${px/w*300},100%25,60%25)`;x.lineWidth=3;x.beginPath();for(let%20X=0;X<=w;X+=4)x.lineTo(X,h/2+m*Math.sin(X*k-t*3));x.stroke();if(on){x.fillStyle='%23fff';x.beginPath();x.arc(px,py,8,0,7);x.fill()}requestAnimationFrame(f)})()</script>

Get Skill Badges

Use them to increase the cap of BITES you can get per project!Hover or tap a badge to see how to earn it.

Start Now!

Program by @anson

Privacy and Terms•Fulfilment Bounty•Security