Animating the Hack For Impact

We've just launched our Hack For Impact hackathon with Northern Powergrid which will be on the 31st January 2024 (with a warm up on 5th December). As part of this, I've designed a new event graphic to use on the webpage, Eventbrite and in our communications.

To keep consistency with our house style, I've reused some graphic elements that Amy Evans had designed for previous events we've hosted. For instance, I've re-used the train from TravelHack2, wind turbines from Planet Data 4, clouds from Planet Data 5, trees from Hack For Impact, and the car/city from the IoT Showcase and Challenger. I've also added some new elements including solar panels and pylons. I've tried to make it feel part of the page with the curve of a landscape that extends beyond the page content.

Scalable vector graphics

All of the graphic elements are created using SVG. SVG is really good for this sort of thing as it lets us create graphics that look just as good on higher pixel-density screens. As SVG images are just XML-based text, they can be easily embedded directly in the page making it faster to load. After a bit of path optimisation, I've kept the whole image to under 24kB and that is before the server applies compression techniques to the page. So the image is lightweight and has a low carbon impact.

Putting it in motion

Another big advantage of SVG is that it can be animated. I've animated a few elements on the graphic including the clouds, the wind turbines, and the train. If you have Javascript enabled, you get some bonus animations. For instance, using my background in astronomy I wrote a little bit of code to position the Sun based on where it would be as seen from Leeds. I also use the Sun's elevation to adjust the "sky" colour; it is Northern Powergrid's signature red when you visit during the day but fades to black at night. I've also hooked up the wind turbines to some real data. Every few hours the page checks the current percentage of National Grid electricity generation that is due to wind. The higher the percentage, the faster the wind turbines in the graphic will spin.