SVG

Back in 2012, I published what has become my (by far) most-read blog post: Disciplinarities: intra, cross, multi, inter, trans. There, I introduced a figure based on a combination of Stember’s textual description and Zeigler’s sketch. Making a vector version I published the figure “properly” in my book Sound Actions, and, as described in this blog post), made a vector version (PDF) and source file (ODG) available on GitHub with a CC-BY license. Making a SVG version Recently, I have tried using AI tools to create SVG versions of various illustrations. This has worked remarkably well, including “SVG’ing” the MishMash emblem and the MishMash Cube. One of the cool things about this is that it opens for creative things, like making the MishMash bubbles blink. ...

Now that we have the MishMash “bubble” illustration as an editable SVG image, it is time to start playing around with how it can be modified dynamically. The first experiment was to try to make it blink. Here, I describe two approaches, using CSS and a GIF. CSS Hover Blink The CSS version is based on this code: .blink-eye-thumb { display: block; transform-origin: center; will-change: transform; } a:hover .blink-eye-thumb, a:focus-visible .blink-eye-thumb, .blink-eye-thumb:hover, .mishmash-bubbles:hover .blink-eye-thumb { animation: bubble-eye-blink 850ms ease-in-out 2; } @keyframes bubble-eye-blink { 0%, 12%, 40%, 100% { transform: scaleY(1); } 20%, 26% { transform: scaleY(0.08); } 48%, 54% { transform: scaleY(0.14); } } The animation compresses the image vertically on hover/focus. To ensure it works everywhere, it targets: ...

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

I have previously written about the MishMash emblem and how I cropped it in a text editor. This was based on the fact that an SVG image is a “vector image” in which all elements are described programmatically. So what appears as an image on screen: is, in fact, an XML file with information. Ever since I discovered this, I thought it could be fun to script changes to the SVG. However, when I opened the file to inspect the content, I quickly realised that it wasn’t as easy as that: ...

I have known for a long time that SVG images are vector based, hence the name “Scalable Vector Graphics”. But it only occurred to me today that SVG is an XML-based image format, which means they can be opened and modified as a regular text file. For the MishMash application, we used PDF versions of the figures (which worked well when writing in LaTeX). However, as I am now working on the first web page for MishMash, I discovered that we have SVG versions of the figures. Unfortunately, the files provided by the designers had a lot of white space (or, to be precise, transparency) around the main part of the figure. ...

I have previously written about the MishMash name. Some have also asked about the story behind the MishMash “emblem”: The MishMash Bubble Diagram It was created by designers from Appex based on a rough sketch I had made for presentations held before we wrote the application: This was again inspired by a figure I have used in several previous lectures on musical AI: However, for the final application document, we wanted something more professional-looking, so I reached out to the design company that had created the RITMO emblem. ...

I have previously written about the different publication cultures at RITMO. This includes different coauthorship traditions between our disciplines: musicology, psychology, and informatics. Our approach to avoid conflicts over (co)authorship is to discuss it often. We also have an exercise that we run occasionally at retreats. Since this may be a topic of interest to others, here I share the case we have developed. We typically allocate an hour for the exercise and split people into small groups (4–6 people) from different disciplines. ...