Design Superstars

30 Cool Web Apps Made Entirely In HTML5

January 22, 2013 Development 1 Comment

65 Flares

65 Flares


×

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

30. html5 web app

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

29. html5 web app

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

28. html5 web app

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

27. html5 web app

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

Sketchpad

26. html5 web app

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

25. html5 web app

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

24. html5 web app

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

Gradient Creator

23. html5 web app

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

22. html5 web app

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

21. html5 web app

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

20. html5 web app

Inspired by nature – a visual presentation of a algorithm

2D Cloth Simulation

19. html5 web app

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

18. html5 web app

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

17. html5 web app

The Evolution of the Web

16. html5 web app

Interactive infographic from Google about the evolution of the web.

Moqups

15. html5 web app

HTML5 web App to create wireframes, mockups or UI concepts, prototypes, etc.

Picturemap

14. html5 web app

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

13. html5 web app

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

12. html5 web app

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

11. html5 web app

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

CanvasLoader Creator

10. html5 web app

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

Tank World

9. html5 web app

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

Canvas Rider

8. html5 web app

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

Ro.me

7. html5 web app

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

3D Tin

6. html5 web app

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

Muro

5. html5 web app

Draw rich illustrations. Uses HTML5′s canvas element.

Bio Digital Human

4. html5 web app

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

1. html5 web app

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

Picozu

2. html5 web app

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

Art of Stars

3. html5 web app

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.


Tags:
About the Author -

Bogdan is the founder of Design Superstars. He is very passionate about design and web development and he's constantly searching for the most interesting things to write about on this site.

  • chuck

    I think Big Data guarantees the future of html5 apps. I love google’s evolution of the web one.

    If you like Sketchpad, you’ll love http://headbodyfeet.com — it lets you make and mashup art.

65 Flares Facebook 17 Twitter 31 Google+ 9 StumbleUpon 1 65 Flares ×