Google+
Shineyrock web design & consultancy

Shineyrock

blog

  • dislike -1 13

    25 Ridiculously Impressive HTML5 Canvas Experiments

    HTML5 is the thing to talk about these days. Today, we have a collection of ridiculously impressive HTML5 canvas-based experiments that will make you say, "Wow!" Let's take a peek at some of the latest, cutting-edge examples out there.

    Warning: The animations in some of these canvas experiments may potentially trigger seizures for people with photosensitive epilepsy. Viewer discretion is advised.

    Before browsing through these experiments, have a look at our HTML5 templates and HTML5 scripts, as a quality script or theme might be a good option for your next project.

    Web developers on Envato StudioWeb developers on Envato StudioWeb developers on Envato Studio

    Now for the experiments!

    1. Orbital Trails

    Beautiful swirling rainbow particles!

    Orbital TrailsOrbital TrailsOrbital Trails

    2. Neon Hexagon Patterns

    Glowing lights and particles trace this hexagonal, honey-comb pattern.

    Neon Hexagon PatternsNeon Hexagon PatternsNeon Hexagon Patterns

    3. Long Shadow

    Simulates a movable light source amongst boxes.

    Long ShadowLong ShadowLong Shadow

    4. Animated Particle Background

    A cosmic network of nodes and lines, with animation and a spotlight effect.

    Animated Particle BackgroundAnimated Particle BackgroundAnimated Particle Background

    5. Click Response

    Click anywhere on the canvas below to see a cute explosion of circles.

    6. Heart Particles

    A vast cloud of shining falling hearts.

    Heart ParticlesHeart ParticlesHeart Particles

    7. Colorful Ribbons

    Watch these colorful bands of light fill the screen.

    Colorful RibbonsColorful RibbonsColorful Ribbons

    8. Draw With Text

    Click and keep dragging on the canvas to draw with random words.

    9. Rotating Spiral

    A 3D spiral, rendered with lines. You can even rotate it with the mouse!

    Rotating SpiralRotating SpiralRotating Spiral

    10. Shape Shifting Text

    View this one in full-screen mode. Type in text and watch it appear in a cool particle effect.

    Shape Shifting TextShape Shifting TextShape Shifting Text

    11. Falling Confetti

    A pretty falling confetti effect. Perfect for a background!

    Falling ConfettiFalling ConfettiFalling Confetti

    12. Parallax Skyline

    A minimalist side-scrolling parallax. This one would be perfect for an old-school video game.

    Parallax SkylineParallax SkylineParallax Skyline

    13. Ambient Background

    Fuzzy bokeh spots swirling around. View this one in full-page mode for the best effect.

    Ambient BackgroundAmbient BackgroundAmbient Background

    14. Fizzy Sparks

    Just hover the mouse over the canvas and see shiny sparks go off everywhere.

    15. Anime.js Fireworks

    Click for a simple, but stylish and colorful fireworks effect.  

    Anime.js FireworksAnime.js FireworksAnime.js Fireworks

    16. Mechanical Grass

    Watch the "grass" grow wherever you move your mouse. Be sure to view this one in full screen to see the effect.

    Mechanical GrassMechanical GrassMechanical Grass

    17. Interactive Stars

    Watch stars and constellations appear in the night sky as you move your mouse.

    Interactive StarsInteractive StarsInteractive Stars

    18. Gravity Points

    Click anywhere on the canvas and see all the particles gravitate towards that point.

    19. Particle Swarm

    Simulated particles swirl around in a simulated magnetic field.

    Particle SwarmParticle SwarmParticle Swarm

    20. Crowd Simulator

    This amusing animation simulates a busy crowd of people walking.

    Crowd SimulatorCrowd SimulatorCrowd Simulator

    21. Birds of a Feather

    A beautiful and serene animated flocking simulation.

    Birds of a FeatherBirds of a FeatherBirds of a Feather

    22. Lightning

    Connect two points anywhere on the screen and watch the electricity arc!

    LightningLightningLightning

    23. Noise Abstraction

    A unique animated algorithm for generating stylish and colorful abstract backgrounds. 

    Noise AbstractionNoise AbstractionNoise Abstraction

    24. Liquid Lights

    A screen full of animated flashing lights, reminiscent of a nightclub or concert.

    Liquid LightsLiquid LightsLiquid Lights

    25. Rainbow Spider

    Can you move quickly enough to make the spider fall down from the web? Give it a try.

    So what do you think? Getting your own ideas for a neat canvas application?

    Well, now you have more than one reason to create HTML5 apps: CodeCanyon has an HTML5 category! Browse through it and see what's available, or have a look at our HTML5 Templates on ThemeForest.

    This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries.

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245

By - category

    By - date