sign in →

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

SHRINK

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


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;charset=utf-8,<!DOCTYPE%20html><body%20style="margin:0;overflow:hidden;background:%23001;cursor:crosshair;color:%23fff;font-family:monospace"><canvas%20id="c"></canvas><script>let%20c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width=innerWidth,h=c.height=innerHeight;let%20bullets=[],enemies=[],particles=[],score=0,gameOver=false,px=w/2,py=h/2,mx=w/2,my=h/2,keys={},mouseDown=0,fireCD=0,time=0,stars=[];for(let%20i=0;i<200;i++)stars.push({x:Math.random()*2000,y:Math.random()*2000,s:Math.random()*2});onkeydown=e=>keys[e.key.toLowerCase()]=1;onkeyup=e=>keys[e.key.toLowerCase()]=0;onmousemove=e=>{mx=e.clientX;my=e.clientY;};onmousedown=()=>mouseDown=1;onmouseup=()=>mouseDown=0;let%20actx;function%20sfx(t){if(!actx)actx=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();if(actx.state==='suspended')actx.resume();let%20o=actx.createOscillator(),g=actx.createGain(),n=actx.currentTime;o.connect(g);g.connect(actx.destination);if(t==1){o.type='square';o.frequency.setValueAtTime(800,n);o.frequency.exponentialRampToValueAtTime(100,n+0.1);g.gain.setValueAtTime(0.1,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.1);o.start(n);o.stop(n+0.1);}else%20if(t==0){o.type='sawtooth';o.frequency.setValueAtTime(100,n);o.frequency.exponentialRampToValueAtTime(10,n+0.3);g.gain.setValueAtTime(0.2,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.3);o.start(n);o.stop(n+0.3);}else{o.type='square';let%20d=0.12;[247,349,0,349,349,330,294,262].forEach((f,i)=>{if(f){g.gain.setValueAtTime(0.1,n+i*d);o.frequency.setValueAtTime(f,n+i*d);}else%20g.gain.setValueAtTime(0,n+i*d);});g.gain.setTargetAtTime(0,n+8*d,0.1);o.start(n);o.stop(n+8*d+0.5);}}function%20loop(){time++;ctx.globalCompositeOperation='source-over';ctx.fillStyle='rgba(5,5,15,0.4)';ctx.fillRect(0,0,w,h);for(let%20s%20of%20stars){ctx.fillStyle=`rgba(255,255,255,${0.2+Math.sin(time/20+s.x)/5})`;let%20sx=(s.x-px/2)%w;if(sx<0)sx+=w;let%20sy=(s.y-py/2)%h;if(sy<0)sy+=h;ctx.fillRect(sx,sy,s.s,s.s);}ctx.globalCompositeOperation='lighter';if(gameOver){ctx.fillStyle='%23f55';ctx.font='bold%2050px%20monospace';ctx.fillText('GAME%20OVER',w/2-130,h/2);ctx.fillStyle='%23fff';ctx.font='20px%20monospace';ctx.fillText(`Final%20Score:%20${score}`,w/2-80,h/2+40);return;}let%20spd=6;if(keys['w']&&py>20)py-=spd;if(keys['s']&&py<h-20)py+=spd;if(keys['a']&&px>20)px-=spd;if(keys['d']&&px<w-20)px+=spd;if(mouseDown&&fireCD<=0){let%20a=Math.atan2(my-py,mx-px);bullets.push({x:px,y:py,vx:Math.cos(a)*18,vy:Math.sin(a)*18,l:60});sfx(1);fireCD=6;}if(fireCD>0)fireCD--;if(Math.random()<0.04){let%20a=Math.random()*6.28,r=Math.max(w,h)*0.8;enemies.push({x:w/2+Math.cos(a)*r,y:h/2+Math.sin(a)*r,s:1.2+Math.random()*2,a:Math.random()*6.28,rotSpd:(Math.random()-.5)/10,t:Math.random()>0.5?0:1});}for(let%20i=bullets.length-1;i%3E=0;i--){let%20b=bullets[i];b.x+=b.vx;b.y+=b.vy;b.l--;ctx.fillStyle=%27%230ff%27;ctx.beginPath();ctx.arc(b.x,b.y,5,0,7);ctx.fill();if(b.x%3C0%7C%7Cb.x%3Ew%7C%7Cb.y%3C0%7C%7Cb.y%3Eh%7C%7Cb.l%3C=0)bullets.splice(i,1);}for(let%20i=enemies.length-1;i%3E=0;i--){let%20ex=enemies[i],angle=Math.atan2(py-ex.y,px-ex.x);ex.x+=Math.cos(angle)*ex.s;ex.y+=Math.sin(angle)*ex.s;ex.a+=ex.rotSpd;ctx.fillStyle=%27%23f0f%27;ctx.save();ctx.translate(ex.x,ex.y);ctx.rotate(ex.a);ctx.beginPath();if(ex.t){ctx.moveTo(18,0);ctx.lineTo(-10,10);ctx.lineTo(-10,-10);}else{ctx.moveTo(0,-18);ctx.lineTo(18,0);ctx.lineTo(0,18);ctx.lineTo(-18,0);}ctx.closePath();ctx.fill();ctx.restore();if(Math.hypot(ex.x-px,ex.y-py)%3C25){if(!gameOver)sfx(2);gameOver=true;}for(let%20j=bullets.length-1;j%3E=0;j--){if(Math.hypot(ex.x-bullets[j].x,ex.y-bullets[j].y)%3C30){for(let%20m=0;m%3C25;m++){particles.push({x:ex.x,y:ex.y,vx:(Math.random()-.5)*15,vy:(Math.random()-.5)*15,l:30});}enemies.splice(i,1);bullets.splice(j,1);score+=10;sfx(0);break;}}}for(let%20i=particles.length-1;i%3E=0;i--){let%20p=particles[i];p.x+=p.vx;p.y+=p.vy;p.vx*=0.96;p.vy*=0.96;p.l--;let%20alpha=p.l/30;ctx.fillStyle=`rgba(255,100,255,${alpha})`;ctx.fillRect(p.x,p.y,4,4);if(p.l%3C0)particles.splice(i,1);}let%20playerAngle=Math.atan2(my-py,mx-px);ctx.fillStyle=%27%230f0%27;ctx.save();ctx.translate(px,py);ctx.rotate(playerAngle);ctx.beginPath();ctx.moveTo(18,0);ctx.lineTo(-12,-12);ctx.lineTo(-8,0);ctx.lineTo(-12,12);ctx.closePath();ctx.fill();ctx.restore();ctx.globalCompositeOperation=%27source-over%27;ctx.fillStyle=%27%23fff%27;ctx.font=%27bold%2020px%20monospace%27;ctx.fillText(`SCORE:%20${score}`,20,40);requestAnimationFrame(loop);}loop();%3C/script%3E%3C/body%3E

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;charset=utf-8,<!DOCTYPE%20html><body%20style="margin:0;overflow:hidden;background:%23001;cursor:crosshair;color:%23fff;font-family:monospace"><canvas%20id="c"></canvas><script>let%20c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width=innerWidth,h=c.height=innerHeight;let%20bullets=[],enemies=[],particles=[],score=0,gameOver=false,px=w/2,py=h/2,mx=w/2,my=h/2,keys={},mouseDown=0,fireCD=0,time=0,stars=[];for(let%20i=0;i<200;i++)stars.push({x:Math.random()*2000,y:Math.random()*2000,s:Math.random()*2});onkeydown=e=>keys[e.key.toLowerCase()]=1;onkeyup=e=>keys[e.key.toLowerCase()]=0;onmousemove=e=>{mx=e.clientX;my=e.clientY;};onmousedown=()=>mouseDown=1;onmouseup=()=>mouseDown=0;let%20actx;function%20sfx(t){if(!actx)actx=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();if(actx.state==='suspended')actx.resume();let%20o=actx.createOscillator(),g=actx.createGain(),n=actx.currentTime;o.connect(g);g.connect(actx.destination);if(t==1){o.type='square';o.frequency.setValueAtTime(800,n);o.frequency.exponentialRampToValueAtTime(100,n+0.1);g.gain.setValueAtTime(0.1,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.1);o.start(n);o.stop(n+0.1);}else%20if(t==0){o.type='sawtooth';o.frequency.setValueAtTime(100,n);o.frequency.exponentialRampToValueAtTime(10,n+0.3);g.gain.setValueAtTime(0.2,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.3);o.start(n);o.stop(n+0.3);}else{o.type='square';let%20d=0.12;[247,349,0,349,349,330,294,262].forEach((f,i)=>{if(f){g.gain.setValueAtTime(0.1,n+i*d);o.frequency.setValueAtTime(f,n+i*d);}else%20g.gain.setValueAtTime(0,n+i*d);});g.gain.setTargetAtTime(0,n+8*d,0.1);o.start(n);o.stop(n+8*d+0.5);}}function%20loop(){time++;ctx.globalCompositeOperation='source-over';ctx.fillStyle='rgba(5,5,15,0.4)';ctx.fillRect(0,0,w,h);for(let%20s%20of%20stars){ctx.fillStyle=`rgba(255,255,255,${0.2+Math.sin(time/20+s.x)/5})`;let%20sx=(s.x-px/2)%w;if(sx<0)sx+=w;let%20sy=(s.y-py/2)%h;if(sy<0)sy+=h;ctx.fillRect(sx,sy,s.s,s.s);}ctx.globalCompositeOperation='lighter';if(gameOver){ctx.fillStyle='%23f55';ctx.font='bold%2050px%20monospace';ctx.fillText('GAME%20OVER',w/2-130,h/2);ctx.fillStyle='%23fff';ctx.font='20px%20monospace';ctx.fillText(`Final%20Score:%20${score}`,w/2-80,h/2+40);return;}let%20spd=6;if(keys['w']&&py>20)py-=spd;if(keys['s']&&py<h-20)py+=spd;if(keys['a']&&px>20)px-=spd;if(keys['d']&&px<w-20)px+=spd;if(mouseDown&&fireCD<=0){let%20a=Math.atan2(my-py,mx-px);bullets.push({x:px,y:py,vx:Math.cos(a)*18,vy:Math.sin(a)*18,l:60});sfx(1);fireCD=6;}if(fireCD>0)fireCD--;if(Math.random()<0.04){let%20a=Math.random()*6.28,r=Math.max(w,h)*0.8;enemies.push({x:w/2+Math.cos(a)*r,y:h/2+Math.sin(a)*r,s:1.2+Math.random()*2,a:Math.random()*6.28,rotSpd:(Math.random()-.5)/10,t:Math.random()>0.5?0:1});}for(let%20i=bullets.length-1;i%3E=0;i--){let%20b=bullets[i];b.x+=b.vx;b.y+=b.vy;b.l--;ctx.fillStyle=%27%230ff%27;ctx.beginPath();ctx.arc(b.x,b.y,5,0,7);ctx.fill();if(b.x%3C0%7C%7Cb.x%3Ew%7C%7Cb.y%3C0%7C%7Cb.y%3Eh%7C%7Cb.l%3C=0)bullets.splice(i,1);}for(let%20i=enemies.length-1;i%3E=0;i--){let%20ex=enemies[i],angle=Math.atan2(py-ex.y,px-ex.x);ex.x+=Math.cos(angle)*ex.s;ex.y+=Math.sin(angle)*ex.s;ex.a+=ex.rotSpd;ctx.fillStyle=%27%23f0f%27;ctx.save();ctx.translate(ex.x,ex.y);ctx.rotate(ex.a);ctx.beginPath();if(ex.t){ctx.moveTo(18,0);ctx.lineTo(-10,10);ctx.lineTo(-10,-10);}else{ctx.moveTo(0,-18);ctx.lineTo(18,0);ctx.lineTo(0,18);ctx.lineTo(-18,0);}ctx.closePath();ctx.fill();ctx.restore();if(Math.hypot(ex.x-px,ex.y-py)%3C25){if(!gameOver)sfx(2);gameOver=true;}for(let%20j=bullets.length-1;j%3E=0;j--){if(Math.hypot(ex.x-bullets[j].x,ex.y-bullets[j].y)%3C30){for(let%20m=0;m%3C25;m++){particles.push({x:ex.x,y:ex.y,vx:(Math.random()-.5)*15,vy:(Math.random()-.5)*15,l:30});}enemies.splice(i,1);bullets.splice(j,1);score+=10;sfx(0);break;}}}for(let%20i=particles.length-1;i%3E=0;i--){let%20p=particles[i];p.x+=p.vx;p.y+=p.vy;p.vx*=0.96;p.vy*=0.96;p.l--;let%20alpha=p.l/30;ctx.fillStyle=`rgba(255,100,255,${alpha})`;ctx.fillRect(p.x,p.y,4,4);if(p.l%3C0)particles.splice(i,1);}let%20playerAngle=Math.atan2(my-py,mx-px);ctx.fillStyle=%27%230f0%27;ctx.save();ctx.translate(px,py);ctx.rotate(playerAngle);ctx.beginPath();ctx.moveTo(18,0);ctx.lineTo(-12,-12);ctx.lineTo(-8,0);ctx.lineTo(-12,12);ctx.closePath();ctx.fill();ctx.restore();ctx.globalCompositeOperation=%27source-over%27;ctx.fillStyle=%27%23fff%27;ctx.font=%27bold%2020px%20monospace%27;ctx.fillText(`SCORE:%20${score}`,20,40);requestAnimationFrame(loop);}loop();%3C/script%3E%3C/body%3E


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;charset=utf-8,<!DOCTYPE%20html><body%20style="margin:0;overflow:hidden;background:%23001;cursor:crosshair;color:%23fff;font-family:monospace"><canvas%20id="c"></canvas><script>let%20c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width=innerWidth,h=c.height=innerHeight;let%20bullets=[],enemies=[],particles=[],score=0,gameOver=false,px=w/2,py=h/2,mx=w/2,my=h/2,keys={},mouseDown=0,fireCD=0,time=0,stars=[];for(let%20i=0;i<200;i++)stars.push({x:Math.random()*2000,y:Math.random()*2000,s:Math.random()*2});onkeydown=e=>keys[e.key.toLowerCase()]=1;onkeyup=e=>keys[e.key.toLowerCase()]=0;onmousemove=e=>{mx=e.clientX;my=e.clientY;};onmousedown=()=>mouseDown=1;onmouseup=()=>mouseDown=0;let%20actx;function%20sfx(t){if(!actx)actx=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();if(actx.state==='suspended')actx.resume();let%20o=actx.createOscillator(),g=actx.createGain(),n=actx.currentTime;o.connect(g);g.connect(actx.destination);if(t==1){o.type='square';o.frequency.setValueAtTime(800,n);o.frequency.exponentialRampToValueAtTime(100,n+0.1);g.gain.setValueAtTime(0.1,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.1);o.start(n);o.stop(n+0.1);}else%20if(t==0){o.type='sawtooth';o.frequency.setValueAtTime(100,n);o.frequency.exponentialRampToValueAtTime(10,n+0.3);g.gain.setValueAtTime(0.2,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.3);o.start(n);o.stop(n+0.3);}else{o.type='square';let%20d=0.12;[247,349,0,349,349,330,294,262].forEach((f,i)=>{if(f){g.gain.setValueAtTime(0.1,n+i*d);o.frequency.setValueAtTime(f,n+i*d);}else%20g.gain.setValueAtTime(0,n+i*d);});g.gain.setTargetAtTime(0,n+8*d,0.1);o.start(n);o.stop(n+8*d+0.5);}}function%20loop(){time++;ctx.globalCompositeOperation='source-over';ctx.fillStyle='rgba(5,5,15,0.4)';ctx.fillRect(0,0,w,h);for(let%20s%20of%20stars){ctx.fillStyle=`rgba(255,255,255,${0.2+Math.sin(time/20+s.x)/5})`;let%20sx=(s.x-px/2)%w;if(sx<0)sx+=w;let%20sy=(s.y-py/2)%h;if(sy<0)sy+=h;ctx.fillRect(sx,sy,s.s,s.s);}ctx.globalCompositeOperation='lighter';if(gameOver){ctx.fillStyle='%23f55';ctx.font='bold%2050px%20monospace';ctx.fillText('GAME%20OVER',w/2-130,h/2);ctx.fillStyle='%23fff';ctx.font='20px%20monospace';ctx.fillText(`Final%20Score:%20${score}`,w/2-80,h/2+40);return;}let%20spd=6;if(keys['w']&&py>20)py-=spd;if(keys['s']&&py<h-20)py+=spd;if(keys['a']&&px>20)px-=spd;if(keys['d']&&px<w-20)px+=spd;if(mouseDown&&fireCD<=0){let%20a=Math.atan2(my-py,mx-px);bullets.push({x:px,y:py,vx:Math.cos(a)*18,vy:Math.sin(a)*18,l:60});sfx(1);fireCD=6;}if(fireCD>0)fireCD--;if(Math.random()<0.04){let%20a=Math.random()*6.28,r=Math.max(w,h)*0.8;enemies.push({x:w/2+Math.cos(a)*r,y:h/2+Math.sin(a)*r,s:1.2+Math.random()*2,a:Math.random()*6.28,rotSpd:(Math.random()-.5)/10,t:Math.random()>0.5?0:1});}for(let%20i=bullets.length-1;i%3E=0;i--){let%20b=bullets[i];b.x+=b.vx;b.y+=b.vy;b.l--;ctx.fillStyle=%27%230ff%27;ctx.beginPath();ctx.arc(b.x,b.y,5,0,7);ctx.fill();if(b.x%3C0%7C%7Cb.x%3Ew%7C%7Cb.y%3C0%7C%7Cb.y%3Eh%7C%7Cb.l%3C=0)bullets.splice(i,1);}for(let%20i=enemies.length-1;i%3E=0;i--){let%20ex=enemies[i],angle=Math.atan2(py-ex.y,px-ex.x);ex.x+=Math.cos(angle)*ex.s;ex.y+=Math.sin(angle)*ex.s;ex.a+=ex.rotSpd;ctx.fillStyle=%27%23f0f%27;ctx.save();ctx.translate(ex.x,ex.y);ctx.rotate(ex.a);ctx.beginPath();if(ex.t){ctx.moveTo(18,0);ctx.lineTo(-10,10);ctx.lineTo(-10,-10);}else{ctx.moveTo(0,-18);ctx.lineTo(18,0);ctx.lineTo(0,18);ctx.lineTo(-18,0);}ctx.closePath();ctx.fill();ctx.restore();if(Math.hypot(ex.x-px,ex.y-py)%3C25){if(!gameOver)sfx(2);gameOver=true;}for(let%20j=bullets.length-1;j%3E=0;j--){if(Math.hypot(ex.x-bullets[j].x,ex.y-bullets[j].y)%3C30){for(let%20m=0;m%3C25;m++){particles.push({x:ex.x,y:ex.y,vx:(Math.random()-.5)*15,vy:(Math.random()-.5)*15,l:30});}enemies.splice(i,1);bullets.splice(j,1);score+=10;sfx(0);break;}}}for(let%20i=particles.length-1;i%3E=0;i--){let%20p=particles[i];p.x+=p.vx;p.y+=p.vy;p.vx*=0.96;p.vy*=0.96;p.l--;let%20alpha=p.l/30;ctx.fillStyle=`rgba(255,100,255,${alpha})`;ctx.fillRect(p.x,p.y,4,4);if(p.l%3C0)particles.splice(i,1);}let%20playerAngle=Math.atan2(my-py,mx-px);ctx.fillStyle=%27%230f0%27;ctx.save();ctx.translate(px,py);ctx.rotate(playerAngle);ctx.beginPath();ctx.moveTo(18,0);ctx.lineTo(-12,-12);ctx.lineTo(-8,0);ctx.lineTo(-12,12);ctx.closePath();ctx.fill();ctx.restore();ctx.globalCompositeOperation=%27source-over%27;ctx.fillStyle=%27%23fff%27;ctx.font=%27bold%2020px%20monospace%27;ctx.fillText(`SCORE:%20${score}`,20,40);requestAnimationFrame(loop);}loop();%3C/script%3E%3C/body%3E

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;charset=utf-8,<!DOCTYPE%20html><body%20style="margin:0;overflow:hidden;background:%23001;cursor:crosshair;color:%23fff;font-family:monospace"><canvas%20id="c"></canvas><script>let%20c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width=innerWidth,h=c.height=innerHeight;let%20bullets=[],enemies=[],particles=[],score=0,gameOver=false,px=w/2,py=h/2,mx=w/2,my=h/2,keys={},mouseDown=0,fireCD=0,time=0,stars=[];for(let%20i=0;i<200;i++)stars.push({x:Math.random()*2000,y:Math.random()*2000,s:Math.random()*2});onkeydown=e=>keys[e.key.toLowerCase()]=1;onkeyup=e=>keys[e.key.toLowerCase()]=0;onmousemove=e=>{mx=e.clientX;my=e.clientY;};onmousedown=()=>mouseDown=1;onmouseup=()=>mouseDown=0;let%20actx;function%20sfx(t){if(!actx)actx=new(window.AudioContext%7C%7Cwindow.webkitAudioContext)();if(actx.state==='suspended')actx.resume();let%20o=actx.createOscillator(),g=actx.createGain(),n=actx.currentTime;o.connect(g);g.connect(actx.destination);if(t==1){o.type='square';o.frequency.setValueAtTime(800,n);o.frequency.exponentialRampToValueAtTime(100,n+0.1);g.gain.setValueAtTime(0.1,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.1);o.start(n);o.stop(n+0.1);}else%20if(t==0){o.type='sawtooth';o.frequency.setValueAtTime(100,n);o.frequency.exponentialRampToValueAtTime(10,n+0.3);g.gain.setValueAtTime(0.2,n);g.gain.exponentialRampToValueAtTime(0.01,n+0.3);o.start(n);o.stop(n+0.3);}else{o.type='square';let%20d=0.12;[247,349,0,349,349,330,294,262].forEach((f,i)=>{if(f){g.gain.setValueAtTime(0.1,n+i*d);o.frequency.setValueAtTime(f,n+i*d);}else%20g.gain.setValueAtTime(0,n+i*d);});g.gain.setTargetAtTime(0,n+8*d,0.1);o.start(n);o.stop(n+8*d+0.5);}}function%20loop(){time++;ctx.globalCompositeOperation='source-over';ctx.fillStyle='rgba(5,5,15,0.4)';ctx.fillRect(0,0,w,h);for(let%20s%20of%20stars){ctx.fillStyle=`rgba(255,255,255,${0.2+Math.sin(time/20+s.x)/5})`;let%20sx=(s.x-px/2)%w;if(sx<0)sx+=w;let%20sy=(s.y-py/2)%h;if(sy<0)sy+=h;ctx.fillRect(sx,sy,s.s,s.s);}ctx.globalCompositeOperation='lighter';if(gameOver){ctx.fillStyle='%23f55';ctx.font='bold%2050px%20monospace';ctx.fillText('GAME%20OVER',w/2-130,h/2);ctx.fillStyle='%23fff';ctx.font='20px%20monospace';ctx.fillText(`Final%20Score:%20${score}`,w/2-80,h/2+40);return;}let%20spd=6;if(keys['w']&&py>20)py-=spd;if(keys['s']&&py<h-20)py+=spd;if(keys['a']&&px>20)px-=spd;if(keys['d']&&px<w-20)px+=spd;if(mouseDown&&fireCD<=0){let%20a=Math.atan2(my-py,mx-px);bullets.push({x:px,y:py,vx:Math.cos(a)*18,vy:Math.sin(a)*18,l:60});sfx(1);fireCD=6;}if(fireCD>0)fireCD--;if(Math.random()<0.04){let%20a=Math.random()*6.28,r=Math.max(w,h)*0.8;enemies.push({x:w/2+Math.cos(a)*r,y:h/2+Math.sin(a)*r,s:1.2+Math.random()*2,a:Math.random()*6.28,rotSpd:(Math.random()-.5)/10,t:Math.random()>0.5?0:1});}for(let%20i=bullets.length-1;i%3E=0;i--){let%20b=bullets[i];b.x+=b.vx;b.y+=b.vy;b.l--;ctx.fillStyle=%27%230ff%27;ctx.beginPath();ctx.arc(b.x,b.y,5,0,7);ctx.fill();if(b.x%3C0%7C%7Cb.x%3Ew%7C%7Cb.y%3C0%7C%7Cb.y%3Eh%7C%7Cb.l%3C=0)bullets.splice(i,1);}for(let%20i=enemies.length-1;i%3E=0;i--){let%20ex=enemies[i],angle=Math.atan2(py-ex.y,px-ex.x);ex.x+=Math.cos(angle)*ex.s;ex.y+=Math.sin(angle)*ex.s;ex.a+=ex.rotSpd;ctx.fillStyle=%27%23f0f%27;ctx.save();ctx.translate(ex.x,ex.y);ctx.rotate(ex.a);ctx.beginPath();if(ex.t){ctx.moveTo(18,0);ctx.lineTo(-10,10);ctx.lineTo(-10,-10);}else{ctx.moveTo(0,-18);ctx.lineTo(18,0);ctx.lineTo(0,18);ctx.lineTo(-18,0);}ctx.closePath();ctx.fill();ctx.restore();if(Math.hypot(ex.x-px,ex.y-py)%3C25){if(!gameOver)sfx(2);gameOver=true;}for(let%20j=bullets.length-1;j%3E=0;j--){if(Math.hypot(ex.x-bullets[j].x,ex.y-bullets[j].y)%3C30){for(let%20m=0;m%3C25;m++){particles.push({x:ex.x,y:ex.y,vx:(Math.random()-.5)*15,vy:(Math.random()-.5)*15,l:30});}enemies.splice(i,1);bullets.splice(j,1);score+=10;sfx(0);break;}}}for(let%20i=particles.length-1;i%3E=0;i--){let%20p=particles[i];p.x+=p.vx;p.y+=p.vy;p.vx*=0.96;p.vy*=0.96;p.l--;let%20alpha=p.l/30;ctx.fillStyle=`rgba(255,100,255,${alpha})`;ctx.fillRect(p.x,p.y,4,4);if(p.l%3C0)particles.splice(i,1);}let%20playerAngle=Math.atan2(my-py,mx-px);ctx.fillStyle=%27%230f0%27;ctx.save();ctx.translate(px,py);ctx.rotate(playerAngle);ctx.beginPath();ctx.moveTo(18,0);ctx.lineTo(-12,-12);ctx.lineTo(-8,0);ctx.lineTo(-12,12);ctx.closePath();ctx.fill();ctx.restore();ctx.globalCompositeOperation=%27source-over%27;ctx.fillStyle=%27%23fff%27;ctx.font=%27bold%2020px%20monospace%27;ctx.fillText(`SCORE:%20${score}`,20,40);requestAnimationFrame(loop);}loop();%3C/script%3E%3C/body%3E

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.

Program by @anson

Privacy and Terms•Fulfilment Bounty•Security