Frank's Laboratory Creative coding tutorials, vanilla JavaScript, HTML canvas, CSS experiments, no frameworks, no libraries

CSS animations

July 10, 2018

Random CSS3 experiments on on social media icons.

Live demo

View on GitHub

Personal Website Rebuilt

July 23, 2019

In July 2019 I have completely rebuilt my personal website. Now it's HTML/CSS and vanilla JavaScript on the front-end, back-end is WordPress. Screenshots here are from the old version. You can also view the old landing page if you click on the preview link.

React Weather App

May 2, 2019

React.js app built with OpenWeatherMap API and Bootstrap, that shows user the current weather at the selected location. You can enter any city/country you want or choose from selection of available cities.

CSS Hover Effects On Buttons

April 23, 2019

Collection of random hover effects on menu buttons using CSS, JavaScript is only used for autoplay feature. Most animations are achieved using new CSS3 functionality such as 3D transforms, mix-blend-mode, flexbox/grid, webfonts, calc(), SVG filters, @keyframes, ::before/::after pseudo elements etc.

MoviesDB Search

January 5, 2019

React app that allows users to search through movies based on a title, fully responsive.

React Live News App

October 20, 2018

Live News app pulling the latest articles from You can sort the news articles by country, category and source. React, APIs, React MDL

Github Profile Finder

September 10, 2018

Enter a username to fetch a user profile and repos. GitHub API, Async/Await + Fetch, Bootstrap + Bootswatch

HTML5 Canvas + JS – Interactive Particle Effects

August 10, 2018

Moving particles that react to mouse position/touch input. This code can be used as an interactive background for a website. Vanilla JavaScript + HTML5 Canvas

JavaScript Drawing App

July 21, 2018

Drawing app. You can combine any of 3 available tools, 5 effects and 8 different brush shapes to create colourful patterns. JavaScript, HTML5 Canvas, CSS3. Doesn't work on mobile, mouse required.

CSS animations

July 10, 2018

Random CSS3 experiments on on social media icons.

Simple 3D Book ‘carousel/slider’

March 21, 2018

Responsive carousel/slider styled as a 3D book. CSS3 pager using SVG filters. Animated background. CSS transforms to create the book itself. Can be used as an image slider or a product preview for magazine/book.

CSS Rotating 3D Cube

November 28, 2017

Simple 3D cube with some button effects and animated background. You can change colour of the cube and it's spin. JavaScript, CSS3 (transforms, font-shadow, ::before elements)