Skip to content


Web animation, multimedia processing, and frontend web applications.

I learned to code in order to make things move on the web, but also because in my video, design and animation work I was already using F/L OSS tools which let you use code or commands to manipulate media in powerful and creative ways.
It felt like I wasn't using my tools to their full potential when I was just clicking around a graphic user interface.

Now I use my own custom software all the time! I use Python to automate tasks in Blender , export and convert images with Inkscape or ImageMagick , or combine FFmpeg commands to batch-process audio & video files.


In my web projects I’ve predominantly used ‘vanilla’ programming languages ( HTML , CSS , SVG , JS ) and relied upon web standards like Web Animations or Canvas in order to get a good low-level understanding of graphics and animation in the web ecosystem. I’ve also used TypeScript , anime.js , Vue , and svg.js extensively. This website is made with Svelte .


How Lowe Can You Go

Meme generator to create mock billboards

CanvasVue 3RemixActivism

I started this project with my friend Mix Irving, out of frustration at the way that the real estate agency & property management firm Lowe&Co have been flooding our city with billboards. Lowe&Co's billboards are often 'edgy', gloating about their success, while Wellington suffers in a housing crisis that's forcing many to move away, others to live in unhealthy, unaffordable rentals, and others to live under the life-long shadow of an unsustainable mortgage.
This tool allows people to take control of the narrative, to edit Lowe&Co's billboards to more accurately reflect the current housing crisis, and the role of estate agents, landlords and property managers in that crisis, then share their creations online (using the native Web Share API,Clipboard API, or downloading, depending on their device).
As it turns out, many others share our frustrations!

Radio New Zealand: Spoof Wellington real estate billboard pictures flood internet

How Lowe Can You Go tool

Convert Anime.js Animations to CSS

Write with the flexibility of Javascript, publish with the performance & portability of CSS

TypeScriptAnime.jsCSSWeb Animation

Writing web animations with the help of Anime.js feels very natural. You make a timeline, and tell your story:

first: the triangle rotates to point towards the circle
then:  the triangle anticipates an action, compressing and vibrating
then:  the circle squishes down, ready to jump
then:  the triangle charges!
then:  the circle jumps out of the way!
then:  the triangle slumps to a stop.
then:  the circle bounces to a safe landing.

Of course, this isn't exactly what an anime timeline looks like, but the key is that you can tell the interdependent story of the triangle and the circle together, as one chronological timeline.

When it comes to publishing your animation though, you can't use Javascript everywhere, e.g. on a Squarespace site, or in a README on Github. There are security restrictions, and it's all a bit more complex than the usual approach (just whacking a GIF in).

However, if you have a looping SVG , animated with CSS , it gives you the crispness and lightness of web animation, in an image file which can be added to a site just as readily as one of those big clunky old GIFs.

It's just a pity that writing CSS animation is such a drag: you need to write one animation for the triangle, and separate animation for the circle, and try to keep everything synched up:

10%: the triangle rotates to point towards the circle.
30%: the triangle anticipates an action, compressing and vibrating.
50%: the triangle charges!
80%: the triangle slumps to a stop.
35%: the circle squishes down, ready to jump
55%: the circle jumps out of the way!
85%: the circle bounces to a safe landing.

If you need to make changes (you always need to make changes) then everything else in the animation gets messed up. I've written complex CSS animations before, and it's a horrible experience!
So this script enables writing animations with anime.js, but publishing as either anime or CSS.

Convert anime to CSS source code

CC Buttons

adapt SVG designs for your local CC chapter


This was a fun tool quickly pulled together for the 2019 Creative Commons Summit - the Dutch Creative Commons chapter had been preparing stickers and badges with the CC heart logo combined with a Dutch flag. The idea was to make their local chapter members identifiable and to swap swag with friends from other chapters. I thought it would be fun for other chapters to be able to adapt their idea to their own country's flag.

CC Buttons tool
CC Buttons source code

Video to SVG

convert videos to lo-fi animated SVGs

PythonFFmpegCSSSVG Animation
low-res, low-frame-rate SVG version of a friend pretending to play drums on her greyhound

This script converts a video to a image sequence at a low framerate, then converts each frame to a vector image of basic shapes.
Each of these vector frames are added to an SVG file in a vertical 'filmstrip', which is then pulled down through the viewBox using a frame-by-frame CSS animation.
I have no idea if there is a practical use-case for this, but it makes teeny tiny files which can still be somewhat discernable, and I think the result looks cool.

Video to SVG source code

People Against Prisons Aotearoa

Contributing to F/LOSS and prison abolition

CSSHAML DesignAccessibility

Incrementally improving the design of an existing project

People Against Prisons Aotearoa (PAPA) has created custom F/L OSS tools for giving members an overview of the organisation, for coordinating advocacy work, and for communicating with prisoners, enabling the organisation to be really effective and spend their energy where it counts. I've done a small amount of work in PAPA's Design and Tech working groups on improving visual design, usability and accessibility, and doing odd media-related jobs (like fixing flickering videos using Python + FFmpeg).

Kākāpō (PAPA Wiki) Merge Requests


Interested in creating interactive digital media, or adapting creative software tools to make your work easier, and fit your particular needs?