30 Cool Web Apps Made Entirely In HTML5

Thanks to the power of HTML5, today we can create incredible websites and web applications. The level of interactivity is so high that sometimes you can have the impression that you are not looking at a HTML, but rather at a flash or something similar, thanks to new syntactical features such as the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to web without using flash and third party plugins.

In this article you can see a collection of 30 cool HTML5 web apps.

Social Collider

The Social Collider reveals cross-connections between conversations on Twitter. It acts as a metaphorical instrument which can be used to make visible how memes get created and how they propagate. Ideally, it might catch the Zeitgeist at work.

Tweetopia

Tweetopia is a 3D Twitter hashtag visualization. Tweets are rendered as speech bubbles above small characters living in an dynamically generated environment that changes colors based on a short day/night cycle. New tweets are continuously added to the scene as time passes.

Storm Tracks WebGL

Storm Tracks WebGL is an interactive visualization of hurricanes, typhoons, cyclones and tropical storm tracks. Information was collected from various sources online and includes data from 1848 to the end of 2012. Storm data can be filtered by date, wind speed or name.

I Know the World

Improve your knowledge of the world and its people through game-ified learning.

Sketchpad

Sketchpad is a drawing/painting application developed in pure HTML and Javascript. Sketchpad includes a number of Drawing Tools — including: Text, Shape, Spirograph, Brush, Calligraphy, Pencil, Paint-Bucket, and Stamp.

Darkroom

Darkroom is a photo-editor built for the web, allowing users to apply simple color and geometry adjustments to photographs. Features include: Exposure, Brightness, Contrast, Saturation, Tint/Temperature, Levels, Color Blindness Simulation, Color Blindness Daltonization, Red-eye Filter, Rotate, Mirror, and Crop.

House Configurator

This is a house configurator. Starting from a predefined template, the user can build its own house and visit it in 3D.

Gradient Creator

Drag & Drop GIMP .GGR files into your browser to view them, then export your gradient into CSS or SVG. ColRD gradient creator presents itself as color blocks—just like a palette. This makes it easier to scale, and re-organize portions of your gradient quickly!

My Robot Nation

Create your awesome, totally unique robot online and we make it real with full-color 3D printing and mail it to your door!

WebGL Water Simulation

A pool of water rendered with reflection, refraction, caustics, and ambient occlusion. The pool is simulated with a heightfield and contains a sphere that can interact with the water’s surface.

PlasmaTree

Inspired by nature – a visual presentation of a algorithm

2D Cloth Simulation

The cloth is simulated by using a combination of point masses and constraints. The point masses are all attached to one another by the constraints, so as gravity tries to pull the masses down the constraints fight to pull the cloth back to its original shape. Its a never ending struggle!

Stroll

A collection of list scroll effects. Normal HTML lists are used and animations are applied to list items as they enter the viewport using CSS. This results in a wave-like effect as each list item animates in sequentially. The code is packaged as a library that can easily be included in other sites. The library includes a custom JavaScript implementation of the inertial scrolling you’d typically see on a touch device.

Google Maps Cube

The Evolution of the Web

Interactive infographic from Google about the evolution of the web.

Moqups

Picturemap

A WebGL demo where you can discovering the world in a new way: see geotagged pictures appear on the world map while they are uploaded to Flickr. Explore what’s going on in the world and how different places look. Get inspired by the colourful pictures people share around the world.

SpacePi

SpacePi is a mouse accuracy/agility game revolving around the defense of 13 bases in the most desolate regions of space. Objective: Create lines to defend against enemy lines. Protect your base until it has grown to its target radius. Collect coins to purchase upgrades. Collect powerups to gain benefits.

Web FM synthesizer

This is a web application made with HTML5 and it’s also using Web Audio API. The application emulates the 80’s most popular synthesizer.

DNA Model

A nice canvas showcase that lets the user perform some customizations of a rotating DNA double helix.

CanvasLoader Creator

A nice little web app that creates a spinning loading graphic using canvas, with a VML fallback for non-supporting browsers.

Tank World

Battle it out in this 3D tank game. Uses HTML5′s canvas element and WebGL.

Canvas Rider

Draw courses for the sticky figure to ride. Utilizes HTML5′s canvas element.

Ro.me

An interactive film that utilizes HTML5′s canvas element and hardware-accelerated 3D graphics by using WebGL.

3D Tin

A 3D modeler that runs in the browser. It makes use of HTML5′s canvas element and WebGL 3D.

Muro

Draw rich illustrations. Uses HTML5′s canvas element.

Bio Digital Human

The BioDigital Human is a virtual 3D body that brings to life thousands of medically accurate anatomy objects and health conditions in an interactive Web-based platform.

3D grapher

Web app draws functions, parametric equations and supershapes using webgl.

Picozu

Editor is a drawing and photo retouching application built on Javascript, HTML 5 and CSS3.

Art of Stars

This is an astronomical sky viewer application that draws stars, constellation, celestial objects on the fly using canvas, based on the current location of your browser.

Some cool related posts:

1. Roundup: 50 Top Notch HTML5 Tutorials
2. 20 Stunning Website Designs That Show The Power of HTML 5
3. 25 Cool Implementations of jQuery in Website Development
4. A New Batch of Extremely Useful Tutorials for Web Developers
5. 10 Cool Infinite Scrolling Effects That Can Enhance Your Website’s Navigation