Code

Segmented

Distinct segmented circles that appear to overlap and intersect — an optical illusion built entirely in HTML and CSS.

Full Screen Source Code

Illusion

An optical illusion delivered entirely in HTML and CSS — no scripts, no video.

Full Screen Source Code

Grid BG

A grid illusion built using only CSS.

Full Screen Source Code

Penrose Tri

A Penrose triangle built using CSS.

Full Screen Source Code

ViddyBG

Underlay a live webcam feed into any HTML page.

Full Screen Source Code

Smooth DOM Sort

CSS transforms used to animate a sort algorithm live in the DOM.

Full Screen Source Code

IMG-melt

A custom HTML element that melts images pixel by pixel.

Full Screen Source Code

Canvas Circle

How to draw a circle using Sine and Cosine, illustrated step by step.

Full Screen Source Code

Cistercian Numerals

Convert from decimal to Cistercian numerals — a system invented by medieval monks.

Full Screen Source Code

UoP3D

UoP logo in 3D using three.js and WebGL.

Full Screen Source Code

Snake

A game of Snake using only DOM elements and JS events — no canvas.

Full Screen Source Code

Xmas Tree

A Christmas tree that uses only CSS perspective transformation.

Full Screen Source Code

Countdown

The Countdown numbers game, built in around six hours during a one-day programming course in 2019 based on audience suggestion.

Full Screen Source Code

Covid Message

Covid-19 podium poster generator.

Full Screen Source Code

WordCount

A tiny word count app.

Full Screen Source Code

Drag-a-Cat

A multi-page drag and drop UI demo.

Full Screen Source Code

Drag and Drop File Inspector

Demo of how to cope with multiple files being dropped on a web page.

Full Screen Source Code

Hallmarks

A responsive website reminding us what the hallmarks of our graduates are.

Full Screen Source Code

CSSPixEd

A pixel editor that uses CSS box-shadows to render the canvas. Try drawing something.

Full Screen Source Code

Xmas 2017

A Star Wars advent calendar built with students in 2017.

Full Screen Source Code

Xmas 2016

Built in a lecture in under 50 minutes, based on audience suggestions — a revision session for the first 12 weeks of learning.

Full Screen Source Code

Structured Start Tab

Make your browser start tab useful with structured links to your most-used pages. A Chrome extension.

Chrome Web Store Source Code

Parkrun Event Summary

A Chrome extension that adds an infographic to parkrun pages summarising the results of an event.

Source Code

Ransom Note

A Chrome extension that reimagines any web page as a 1960s ransom note. Wholly pointless. Built for fun during a hackday.

Chrome Web Store Source Code

DCalc

A degree calculator app built live across several lectures, modelling the three degree classification methods the university applies.

Full Screen Source Code