1. 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. The result looks like this:

  2. 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 again I wanted to avoid external dependencies. Also, I guessed this was going to be relatively straightforward using drawImage, and for once it turned out I was right.

  3. 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.

  4. Touch Grid

    Straightforward experiment with a canvas displaying some circles. Move your mouse or fingers over the circles, and they will react. I wanted to keep the experiment simple and dependency-free, so it’s only listening to mousemove and touchmove events. This means that it doesn’t have full touch and pen support on Internet Explorer. Microsoft’s proposal for pointer events is on its way to becoming a standard, so one day we may be able to forget about mouse, touch and pen events, and just deal with a single type.

  5. Another Lorenz Attractor

    Lorenz attractors are kind of awesome, so I took another stab at them. This experiment does use JavaScript, because I couldn’t think of a good way of showing the animation without it. I’m just absolutely positioning div elements along the x and y axes, and faking the z axis by altering the size. Nothing to see here, move along.

  6. Lorenz Attractor

    Another silly experiment, this time with CSS shadows, to render a Lorenz attractor. There’s no JavaScript involved, everything is done with CSS (generated by the Sass preprocessor). You really don’t want to see the source code for this one. It’s a huge text-shadow property with the coordinates for each of the 5000 iterations of the equations that Sass ran.