Canvas demos you can play with right now

Hundreds of canvas demos, each running live on its creator's own site: some of them vibe-coded with AI, all of them playable in your browser with nothing to install. Press a card to play one on its own page, or start the cruise to ride through them one after another.

Made one of these? See how many people played yours → or use email

• classic snake game html5 canvas javascript 🐍 A modern Snake Game built with HTML5 Canvas, CSS, and Vanilla JavaScript. Features mobile touch controls, grid & speed customization…
• snake game Canvas will make the rectangle from the position you give. For example, if you give (0, 0, width=20, height=20), it will start from 0, 0…
• HSC 2022 Q16b This is just a really simple simulation that can be used to find out the answer to Question 16 part (b) in the 2022 HSC Extension 2 Exam…
• adhd trap Ability to choose custom sound effects from your device. User friendly sliders as variables settings. Different spin effects often seen on…
• curtainsjs Note that if you are using React, you might want to try react-curtains, curtains.js official React package. The library is split into…
• games tools Welcome to the versatile web project where you can both entertain yourself with an engaging jigsaw puzzle game and utilize powerful tools…
• projeto marvel Como um grande fã da Marvel e um apaixonado por tecnologia e jogos, este projeto sem dúvidas é um dos meus favoritos até agora. O projeto…
• stardust game A meditative arcade game about movement, light, and the quiet joy of drifting through a starfield. Gather glowing motes, paint…
• game set code Each version is a single self-contained HTML file — download any one and open it locally with no internet needed. Player name entry…
• purvalsingh.github.io Space-themed portfolio of Purval Singh, web developer and CS student, with a playable arcade
• mgupta646.github.io An interactive, GBA-style pixel town where every building is a piece of my work: AI products, data and analytics, software, NYU coursework…
• indiana aardewerk This game was made within a Smart Solution Semester project for Archaeology faculty of Saxion University. The goal of the project is…
• prism pulse game A fast-paced arcade game of color, rotation, and reflex. Rotate your shield to absorb matching orbs — one wrong move and it's over. The…
• operation silent dawn A browser-native C&C fan expansion by DRVsoft (2026), built on Aditya Ravi Shankar's open-source HTML5 engine. ▶ PLAY NOW in your browser ·…
• hyper snake omega RAINBOW FEVER. 76 segments, 27x combo, 280% engine speed, walls turned off. Forget whatever boring, beige, 1997 Nokia snake game you played…
• Infinite Letter Canvas Sonsuz, matematiksel bir 2D harf matrisinde kelimeleri keşfedin, arayın ve işaretleyin. Türkçe, İngilizce, İspanyolca ve Almanca dil…
• Chroma Audio A music player with real-time spectrum visualization and a built-in 10-band EQ. Single file, runs entirely in your browser — no server, no…
• happy birthday animation Animasi Kanvas Interaktif & Audio Player Perayaan Ulang Tahun Modern Berbasis Web Happy Birthday Animation adalah aplikasi web interaktif…
• turing pattern generator Gray-Scott reaction-diffusion system: spots, stripes, mazes from two parameters. Try it live · 🌍 EN · 🌏 ZH. Gray-Scott reaction-diffusion…
• game of life studio A polished web-based studio for Conway's Game of Life and related cellular automata. Infinite sparse grid, pattern library, custom…
• shimmer text A soft-blur front sweeps across your text, then settles into crisp type. One file, zero dependencies, 8 kB gzipped. The text stays…
• gradient gl Default canvas style: z-index: -1, no mix-blend-mode. An opaque html/body background covers a -1 canvas. Raise z-index for fixed chrome or…
• programmatic patterns A collection of generative HTML backgrounds. Each file is fully self-contained — no build step, no dependencies. Download and open in any…
• revealed Paint one image out of another. A wet-edge WebGL reveal for React and plain JS. ![A scripted pointer sweep tears a photograph of a beige…
• autoportrait autoportrait renders an image as a timed painting performance on an HTML canvas: a graphite underdrawing traced along the image's edge…
• journal page by Cedar, with Lumen · 展示页： 一支给 Claude 用的画笔：把一页手帐画成一张图。水彩贴纸、和纸胶带、票根、卡片、草草的手写字，全部用代码在 canvas 上一笔一笔画出来，不用 AI 生图。 需要 Claude Code、Node.js 和一个…
• sk graphics High-performance digital architecture studio specializing in interactive spatial web environments, custom GLSL shader engines, and…
• sketchbook A collection of small browser experiments: classic games, simulations, fractals and canvas effects. Most were written while learning web…
• drawing app A browser drawing app built with p5.js, with 8 tools, an 18-colour palette, undo, select-and-move (cut & paste) and save-to-image. Built on…
• portfolio Personal Portfolio Website
• generative art pack [!NOTE] Six agents and four skills that take a generative piece from concept → sketch → algorithm → shader → color → export (print, video…
• manishh 13.github.io A living ASCII island you can walk around. Every building on it is something I built. Walk with WASD or the arrow keys, or click anywhere…
• sunburst A hierarchy as a 3D sunburst with height Open Sunburst · Run it · More tools A tree of data as rings around a center, raised into volume…
• chart 3d Pie, bars, polar and area charts in 3D, with an entrance Open Chart 3D · Run it · More tools The everyday charts, given volume and a way to…
• hexbin A point cloud counted into 3D hexagon towers Open Hexbin · Run it · More tools Thousands of points, counted into hexagons and raised as…
• xyz cube Your data as points in a 3D cube on axes you name Open XYZ Cube · Run it · More tools Three axes, your names on them, your points inside…
• orbital Data as orbits, axes or a bending mesh Open Orbital · Run it · More tools One dataset, three ways to look at it. Points ride rings, sit in…
• metaballs Soft masses that merge, split and leave holes Open Metaballs · Run it · More tools Drops of a field: close masses melt into one shape…
• particle dance Particles that dance along patterns and 3D forms Open Particle Dance · Run it · More tools A field of small symbols that never stands…
• particles 3d A WebGL2 cloud of up to 300,000 particles Open Particles 3D · Run it · More tools A cloud that assembles itself, holds and breathes out…
• lucas ligenza portfolio A personal portfolio by Lucas Ligenza, explored as a journey through an ASCII galaxy. Native scrolling carries a rocket from Earth to the…
• mazeqr A real, scannable QR code drawn as a living maze. People wander it, a monster hunts them, and the code is built to stay readable while it…
• Rakeful A digital Zen garden. Drag across a field of sand to rake patterns into it, pick a rake with 3, 4 or 5 teeth, and reset to smooth the sand…
• audrey hung Procedural illustration, zero image assets. Every drawing is generated at runtime with the Canvas 2D API — wobbly ink strokes, watercolor…
• Pixel Lace Studio A free, browser-based studio for designing ornate pixel lace — the delicate, symmetric dot-and-grid patterns you see all over Pinterest…
• animacion Un mini-juego pixel art autobiográfico que se juega solo. Perla, diseñadora UX/UI, ilustradora y emprendedora que vive en Cancún, corre sin…
• larp dashboard Live Action Role Play wordplay repo, a fake ai dashboard to flex being an AI master! 😆 A self-contained, zero-dependency animated "AI…
• canvas effects Eight animated greyscale backgrounds for a 2D canvas, with ordered dithering. They sit behind body text. Each one changes the page colour…
• webnix particles A cinematic browser experiment where typography, particles, motion and pointer interaction become one interface. WEBNIX is a visual…
• Galaxy Quest Cinematic Engine A broadcast-standard, state-driven cinematic workspace built entirely in vanilla web technologies. This project proves that the modern…
• textmode.js textmode.js is a free, lightweight, and framework-agnostic creative-coding library for real‑time ASCII and textmode graphics in the…
• silkreel A KiCad board in. A release film out. silk reel reads a .kicad_pcb and renders a film of that board, built from its real copper, parts and…
• elpy Latest builds are available in the project releases page. Creates and returns an engine object. image: { path: 'path/to/image/', repeat…
• personal website 一个纯手搓的个人网站。门厅是 2D 的，推门进去是一间 Three.js 手写的 3D 书房，屋里每件东西都能点；首页还藏着一支 30 秒的代码生成短片。 没有一个剪辑软件参与：画面是一个 HTML 文件里逐帧算出来的，音轨是 Web Audio 合成的。…
• one html page challenge The goal is to create anything you want within 1 single html file. Practice your skills with the barebones of web development. How creative…
• GyroDodge Dodge! Shoot! Win!
• webgl design マウスやスワイプの動きに連動して、背景が水面のように美しく揺らぐ演出（WebGL）のサンプル集です。 軽量なライブラリから、高度なカスタマイズが可能なものまで、3種類のライブラリによる実装パターンを収録しています。 インタラクティブ性…
• celtic knots A Celtic knotwork generator and pattern editor, written in TypeScript with zero runtime dependencies. Inspired by Janis Elsts' original…
• Magic Camera Magic Camera is an in-browser invisibility cloak experiment powered by real-time computer vision. It records an empty reference view of…
• line engine Engraved line patterns: superformulas, rosettes, waves and Lissajous, in motion Open Line Engine · Run it · More tools The engraved line of…
• motion pad One pad for the character of motion Open Motion Pad · Run it · More tools Easing as a place on a square instead of a dropdown. Each corner…
• halftone cloud Images rebuilt as a halftone of flying shapes Open Halftone Cloud · Run it · More tools Drop an image and it turns into a cloud of small…
• logomachine Seeded generative marks: one seed, one pattern, always Open Logomachine · Run it · More tools A machine for marks. Every seed is a pattern…
• motion primer Bodies with behaviors: swarm, pack, magnet, orbit, fall, scatter Open Motion Primer · Run it · More tools A primer of motion. Six…
• minwall Turn any codebase into a wallpaper or a seamless looping video. Point it at a GitHub repo, and it picks the most representative source…
• octagons Animated backgrounds built from regular octagons. Line art on canvas — the colour gradient runs along the edges, nothing is ever filled…
• trigons lite Lightweight animated triangulated backgrounds for the web. Zero dependencies, ~3KB gzip. fill (default) — filled low-poly triangles with…
• Cake Stack Sweet Rush Place each dessert, read the landing feedback, and build the tallest and sweetest tower you can. Sweet Stack turns a simple tap-to-drop…
• oneocean elements free Animated backgrounds, UI pieces and shaded 3D icons in plain JavaScript. No React, no build step, zero dependencies. Every animated…
• ASCIIGround A TypeScript library for creating animated ASCII canvas backgrounds. Creates smooth, organic-looking patterns like clouds, terrain or…
• design database Interaction, motion and material studies for the web. Small, self-contained components with live demos, documented props, and notes on how…
• pixel stretch Drag to stretch. Break the image. A glitch tool that runs entirely in your browser. → Open the tool — no install, no sign-up. A…
• fluid Dependency-free WebGL studio for generating backgrounds, wallpapers, Open Graph images, and live embeddable canvases. One HTML file. No…
• every frame is code Every frame is code is a special tool that lets you describe what you want to see—a spinning logo, a bouncing ball, a colorful particle…
• pixelol Every pixel art editor on the planet uses the same square grid. Pixelol doesn't. The pixel here is a diamond — rotated 45°, built in from…
• xerox collage editor Custom canvas size (presets or width/height inputs), shared across every sheet in the carousel. Photo cutouts with two modes: jagged…
• afterglow You don't move a character — you leave light on. A novel, endless HTML5 light-painting game. Hold the shutter open and steer glowing lights…