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:

MishMash emblem with overlapping Humans and Machines circles between Science and Art

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:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="50 210 480 370">
<g isolation="isolate">
    <g id="Layer_1" data-name="Layer 1">
    <path d="M354.572,394.288c0-51.293-25.447-96.638-64.402-124.113-38.955,27.475-64.402,72.82-64.402,124.113s25.447,96.638,64.402,124.113c38.955-27.475,64.402-72.82,64.402-124.113Z" fill="#363644" stroke="#363644" stroke-miterlimit="10" stroke-width=".5"/>
    <path d="M377.546,242.509c-32.532,0-62.669,10.24-87.376,27.665,38.955,27.475,64.402,72.82,64.402,124.113s-25.447,96.638-64.402,124.113c24.706,17.425,54.844,27.665,87.376,27.665,83.825,0,151.778-67.953,151.778-151.778s-67.953-151.778-151.778-151.778Z" fill="#c1f7ae" stroke="#363644" stroke-miterlimit="10" stroke-width=".5"/>
    <path d="M225.768,394.288c0-51.293,25.447-96.638,64.402-124.113-24.706-17.425-54.844-27.665-87.376-27.665-83.825,0-151.778,67.953-151.778,151.778s67.953,151.778,151.778,151.778c32.532,0,62.67-10.24,87.376-27.665-38.955-27.475-64.402-72.82-64.402-124.113Z" fill="#a7a1f4" mix-blend-mode="multiply" stroke="#363644" stroke-miterlimit="10" stroke-width=".5"/>
    <g>
        <path d="M261.023,217.931c-.089-.755-.453-1.342-1.089-1.76s-1.417-.626-2.341-.626c-.676,0-1.267.109-1.771.328-.504.219-.897.52-1.178.902s-.421.817-.421,1.305c0,.408.098.757.295,1.048.196.291.448.532.757.724.308.191.631.348.969.47.338.122.649.22.932.294l1.551.418c.398.104.841.249,1.331.433s.959.434,1.41.749c.45.316.821.72,1.115,1.212s.44,1.097.44,1.812c0,.825-.215,1.571-.645,2.237s-1.057,1.195-1.879,1.588-1.821.59-2.994.59c-1.094,0-2.04-.177-2.837-.53-.798-.353-1.424-.845-1.879-1.477-.455-.631-.712-1.364-.771-2.199h1.909c.05.576.245,1.053.585,1.428.341.376.773.654,1.298.835.524.182,1.09.272,1.696.272.706,0,1.34-.115,1.902-.347.562-.231,1.007-.555,1.335-.97s.492-.9.492-1.458c0-.507-.142-.919-.425-1.237-.283-.318-.656-.577-1.119-.775-.462-.199-.962-.373-1.499-.522l-1.879-.537c-1.193-.343-2.138-.832-2.834-1.469-.696-.637-1.044-1.47-1.044-2.498,0-.855.232-1.603.697-2.241s1.091-1.136,1.879-1.491c.788-.355,1.669-.533,2.644-.533.984,0,1.859.175,2.625.525s1.373.829,1.823,1.436c.45.606.687,1.295.712,2.065h-1.79Z" fill="#363644" stroke-width="0"/>
...

I imagine that this is because the designers exported from a professional program (Adobe Illustrator?) that creates such superfluous code. Too bad, it isn’t easy to work programmatically with this mess. However, before giving up, I decided to use AI to help.

Converting to SVG using ChatGPT

I tried loading the SVG file into ChatGPT, but it turns out it cannot read SVG files. Instead, I saved a version as a PNG file and uploaded it to ChatGPT. Loading and asking it to create an SVG worked remarkably well:

ChatGPT’s first SVG attempt with circles and text but missing colours and overlap

It managed to find the circles and text, but missed out on the colours and overlap. However, after some iterations, where I gave it the correct colour codes and asked explicitly to add the overlapping part in the middle, it ended up with something very similar to the original:

Recreated MishMash emblem closely matching the original colours and overlap

And for this one, the code is actually human-readable:

<svg width="420" height="320" viewBox="0 0 420 320"
    xmlns="http://www.w3.org/2000/svg">

<!-- Background -->
<rect width="100%" height="100%" fill="white"/>

    <!-- Left circle: Humans -->
    <!-- purple -->
    <circle cx="150" cy="160" r="110"
    fill="#A7A1F4"
    stroke="#777"
    stroke-width="1"/>

    <!-- Right circle: Machines -->
    <!-- green -->
    <circle cx="270" cy="160" r="110"
    fill="#C1F7AE"
    stroke="#777"
    stroke-width="1"/>

<!-- Overlap (darker center) -->
<!-- Draw the intersection of the two circles filled with the dark color -->
<defs>
    <clipPath id="clip-left-gpt" clipPathUnits="userSpaceOnUse">
    <circle cx="150" cy="160" r="110" />
    </clipPath>
</defs>
<circle cx="270" cy="160" r="110" fill="#363644" clip-path="url(#clip-left-gpt)" />

<!-- Labels -->
<!-- Top: Science -->
<text x="210" y="35"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="20"
        fill="#333">
    Science
</text>

<!-- Bottom: Art -->
<text x="210" y="305"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="20"
        fill="#333">
    Art
</text>

<!-- Left: Humans -->
<text x="90" y="165"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="18"
        fill="#333">
    Humans
</text>

<!-- Right: Machines -->
<text x="330" y="165"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="18"
        fill="#333">
    Machines
</text>

<!-- Center: MishMash -->
<text x="210" y="165"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="18"
        fill="white">
    MishMash
</text>

</svg>

Creating an icon

One benefit of having a fully controllable SVG to start from, is that it is easy to remove the text from it by simply deleting the bottom part of the file:

MishMash Bubbles

From this, I created a small icon-sized image to use on the web page.

Playing with the colours

The reason I started the exploration into the SVG file was to see if I could add a dynamic version on the web page. There are many ways to doing this, but to begin with, I asked CoPilot to scramble the colours in the image for me, creating 5 alternative versions:

MishMash Bubbles MishMash Bubbles MishMash Bubbles MishMash Bubbles MishMash Bubbles

Based on this, it is possible to change randomly between the 6 versions based on mouse hovering:

<a href="/about/">
    <img src="/assets/images/bubbles/mishmash_bubbles.svg"
         alt="MishMash explores the meeting point of humans and machines with art and science"
         width="400"
         onmouseover="this.lastImage = this.lastImage ?? -1; let next; do { next = Math.floor(Math.random() * 5 + 2); } while (next === this.lastImage); this.lastImage = next; this.src='/assets/images/bubbles/mishmash_bubbles' + next + '.svg';"
         onmouseout="this.src='/assets/images/bubbles/mishmash_bubbles.svg';">
</a>

The end result shows up like this:

MishMash explores the meeting point of humans and machines with art and science

The next step will be to do some more dynamic effects, but that will be another day.