Sketch.js, CSS and Canvas Animations

Minimal JavaScript Creative Coding Framework
and Maximal Fun by Datatuki, Jorma Hytönen


Multi-touch drawing

Basic example demonstrating how to set up a sketch and handle mouse / touch input


Create a multi-touch particle toy with sketch.js

Plasmatic Isosurface

An example using sketch.js in WebGL mode


How to integrate sketch.js with THREE.js

Muscular Hydrostats

An interactive canvas demo powered by sketch.js


An experiment which uses sketch.js with CoffeeScript

1 Million Particles

Moving lots of particles around on the GPU


Hakim El Hattab used sketch.js in this awesome interactive experiment., Jorma Hytönen modify it for the Ubuntu Server.


Interactive canvas demo by Jack Rugile

Parallax Mountains

Excellent parallax effect from Jack Rugile, using the sketch.js 2d canvas

Parallax Skyline

Another parallax variation from Jack Rugile

Swarming Bugs

Jack Rugile creates wonderful hungry creatures that search for food

Draw Worm

CodePen  Draw Worm is canvas-based animation that creates branches; the animation follows the mouse, creating more branches.


CodePen  Canvas creates different color rays that follow the user's mouse at an accelerated rate.

Single Elment Logo

CodePen  Modernizr composes the Google Chrome logo using :before and :after, as well as a number of CSS gradients.

Social Switchbook

CodePen  Social Switchbook effect provides a keyring-style set of elements which animate into display as you hover over each.

Solar System

GitHub/Julian Garnier  3D Solar System data visualisation done in HTML/CSS and a bit of Javascript.

Navigation Knob

CodePen  Navigation Knob, created with only HTML and CSS, is a circlear knob which illuminates the selected value when clicked.