Francis's Octopress Blog

A blogging framework for hackers.

16 Impressive CSS3, HTML5 and Javascript Experiments From Hakim

16 Impressive CSS3, HTML5 and Javascript Experiments From Hakim

If you’re a fan of Canvas, WebGL and interactive CSS3, HTML5 and Javascript, you most probably have heard of the name Hakim. Hakim is a web developer and creative programmer from Sweden who passionate about working with animation and interactivity. He has many personal projects and experiments with HTML5, CSS and Javascript showcased in Chrome Experiments and other places. We are really impressed but his creativity and cool stuff that he managed to create, and the following is some of the coolest things on the web.

  • CSS3 Scroll EffectCool list scrolling effect. Not intended for any practical use but the visuals are surprisingly impactful. CSS3 Scroll Effect
  • DOM TreeChristmas Pine Tree wit form elements. DOM Tree
  • OrigamiSimply a colorful folding doodle on. Click anywhere on the drawing – or use your keyboard – to activate different layouts. Origami
  • .net 404A creepy 404 page for .net magazine. .net 404
  • SphereThe sphere – actually more of a spiral – is built out of 10,000 particles and the structure changes over time. Sphere
  • Textify.itBrowser for or drag an image onto the page and watch it be reconstructed purely out of text. The markup for the resulting textual image can be copied and used elsewhere. Textify.it
  • WebGL ParticlesAn experiment created to test the efficiency of particles rendering with WebGL. WebGL Particles
  • BreakDOMThis is a remix of the classic Breakout game except all game elements have been replaced with HTML user interface elements. BreakDOM
  • SinuousA game built on the HTMLCanvas element which will test your mouse pointer reflexes. The objective is to stay clear of the evil red dots and stay alive as long as possible. Sinuous
  • MagneticControl and create currents of particles which react to magnetic nodes. Magnetic
  • WaveA wave with bubbles floating on the surface, the bubbles each represent a tweet with the word “water” in it. Wave
  • TrailParticle movement patterns that generate smooth trails. Trail
  • BlobSoft blobby physics. It’s like, you know… jelly? Blob
  • BacteriumAn interactive experiment with bacteria in a playful and dynamic physics world. Bacterium
  • Particle DepthParticle positioning patterns using depth. Particle Depth
  • KeylightA playhead travels between keys which resonate in sound depending on where they are placed in the room. Keylight