Skip to main content

Playground

  • Colored Noise

    Using the Web Audio API to generate noise of different colors. You can move the sliders to adjust the gain on the white, pink and red noise generators.

  • SVG Painter

    You know that cool animation that Polygon used in their Xbox One and PS4 reviews, where SVG images appeared to draw progressively? It’s really easy to do. You just need to set the stroke-dasharray property of each path to its total length, and then animate the stroke-dashoffset property.

  • Image Comparison

    I wanted to compare two images side by side for my articles on pixel art scaling (parts one and two), to show the difference between various algorithms. The TwentyTwenty jQuery plugin does this beautifully, but I wanted to avoid external dependencies.

  • Magnifying Glass

    I wanted a magnifying glass effect for my articles on pixel art scaling (parts one and two), to show the difference between various algorithms. There are a few jQuery plugins that do this, but I didn’t want to add external dependencies, and this was a good excuse to play with the canvas element.

  • Touch Grid

    Straightforward experiment with a canvas displaying some circles. Move your mouse or fingers over the circles, and they will react.

  • Lorenz Attractor with JS

    Drawing a Lorenz attractor by absolutely positioning span elements along the x and y axes, and faking the z axis by adjusting their size.

  • Lorenz Attractor with CSS

    Drawing a Lorenz attractor with CSS shadows (generated by Sass), no JavaScript involved. You really don’t want to see the resulting CSS though. It’s a huge text-shadow property with the coordinates for each of the 5000 iterations of the equations that Sass ran.

  • Animated Cuboids with CSS

    Silly use of CSS transforms and animations to have a bunch of cuboids rotate in a certain pattern. There’s no JavaScript involved, everything is done with CSS (generated by Sass).