A CSS Grid layout using perspective and Y-rotation to give a 3D effect.
Expanding CSS Grid experiment showing characters from Game of Thrones.
A morphing grid experiment based on a Flash experiment by Yugo Nakamura
A CodePen experimenting with displaying many rows of content in an innovative way.
Just a fun project playing around with the matter.js library to make an animated layout.
A layout based on the famous 1924 poster by Alexander Rodchenko for the Gosizdat publishing house.
A data visualisation of the distance travelled by each Premier League footballer to their current club.
An experiment in overlaying CSS Grids to create an isometric layout.
A horizontal CSS Grid using vertical-lr writing mode to maintain a up->down then left->right dense packing.
Dynamically generated large "drop caps" using "shape-outside" to wrap text round a large first letter.
An exercise in using D3.js and SVG to create data visualisations of cocktails and their ingredients.
An experiment on CodePen combining CSS Grid and SVG animation using D3.js.
A CodePen that uses CSS Grid as a mask to recreate a design similar to a poster.
A selection of data visualisations from the 2016 Summer Olympics.
Builds on previous examples with CSS Grids to make an eCommerce product grid with a 3D effect.
A diagonal grid that fills exactly the browser window and orders the items appropriately.
A CSS Grid eCommerce layout using skew.
An eCommerce grid layout with tessellating tile design.
An eCommerce CSS Grid layout mimicking the tessellation of moorish tile design.