Exploring Data-Driven SVG Part 4 Animation and Filters

Published Categorized as Creative, Experimentation, HTML Content Visual, SVG No Comments on Exploring Data-Driven SVG Part 4 Animation and Filters

After exploring SVG size, colour fill, pattern fill, rotation, polygon paths and arcs, the next natural progression was to explore filters and animation.

There are a few methods to animating SVG, JavaScript was not practical for me, CSS animations seemed the way to go but had certain limitations, and then there was SMIL.

There was a lot of content on the net warning of SMIL’s declining use, but these were several years old (which in tech terms is considerably ancient). Further investigation gave me confidence that SMIL is here to stay for a while, and regardless, I wanted to learn it anyway.


So what was I going to create? Well, having recently re-discovered Phil Seamark’s DAX games and the absolutely bonkers Temple of DAX, I’d thought I’d have fun creating a game of my own. Rolling Dice seemed a simple idea and was also a chance to play with random numbers not having had a need to use them in my day job.

One of my design requirements was that the game could be refreshed in browser by users without having to refresh the dataset. This meant capturing the random numbers for each of the die faces in a measure. It also meant that all calculations on those random numbers were to be done in the same measure.

This worked well in Power BI Service, but what I hadn’t realised was that upon publishing to web, the data would be cached for an hour. So all that effort of crafting everything in a single measure seemed wasted! Ah well, the more you know.

To see how I created the game, the pbix file can be downloaded from powerbi.tips

Leave a comment

Your email address will not be published. Required fields are marked *