Some weeks ago, I wrote about how I modified the SVG image of the MishMash “bubbles”. Today, I got around to doing a similar process with the MishMash “cube”, an illustration summarising how we want to work in MishMash.
The cube
The idea of the cube is to present the work packages that structure the organisation, the perspectives that are central to all our work, and the approaches which describe the methods used. One of the aims of MishMash is to enable true interdisciplinary collaboration, and the idea is that the cube will assist us with communicating the multidimensionality of such an endeavour.
Making an editable SVG
As I described in the bubble post, the source SVG shown above was difficult to read and parse for humans (at least for me), probably because it was generated in commercial software that created a messy SVG structure.
I tried to ask CoPilot to help me clean up the SVG directly, but it failed. So I reverted to creating a PNG and feeding it to ChatGPT with the correct colour codes, which helped me create the cube structure and the front work package text elements. It failed to recognise the rotated perspective and approach text boxes, though, so I had to add them to the exported SVG file manually.
The trick was to use the rotate(angle) function and then position the coordinates so that they look ok in the image. The final image looks like this:
Making variations
The cool thing about the SVGs is that I can easily make different versions with and without text:
And, as for the bubbles, I want to explore using dynamic CSS elements to play with the cube. That is now possible with both human- and machine-readable source files.