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

data:text/html,<body bgcolor=0 text=white>

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: