Creative & Visual

Projects that make things you can see, hear, and interact with.

Project	Starting Point	You'll Eventually Learn
Drawing App	Draw a line on a canvas	Shapes, tools, layers, collaboration, SVG
SVG Waves	One sine wave as an SVG path	Layering, randomization, animation, export
Color Palette	Generate a random hex color	Color theory, harmony rules, extraction from images
Gradient Generator	Two colors and a direction	Multiple stops, radial/conic, CSS output
Photo Booth	Show webcam feed in a video element	Canvas filters, capture, crop, export
SVG Animator	Animate one SVG attribute over time	Keyframes, timeline, easing, path animation
Procedural Landforms	Random height values on a grid	Noise functions, erosion, 3D rendering
Particle Library	Move dots across the screen	Physics, interactions, WebGL, npm publishing
Creative Coding Framework	A loop that draws a circle	setup/draw pattern, DOM rendering, animation, API design
Music Generator	Play a single tone	Scales, rhythm, Web Audio API, MIDI
Music Programming Language	Parse "C4 D4 E4" and play notes	Lexer, parser, AST, sequencing
GUI Toolkit	A slider that controls a number	Color pickers, folders, binding, npm package
Image Optimizer	Resize an image with Canvas	Compression, formats (WebP/AVIF), batch, API
Video Pipeline	Transcode one video with ffmpeg	Multiple resolutions, thumbnails, HLS, queue