P as in Perplexed

For my site DeepSID, I have recently had a project going where I wanted to show focus icons for folder rows in a song list. Each folder would represent a collection of songs by one composer. The focus icons would be solid circles with a letter in it and would indicate whether the composer was a professional (P), a scener (S), was on Compunet (C) or on Battle of the Bits (B).

The first version just used CSS to put a font letter inside a DIV rounded as a circle. However, the letter didn’t always align well within the circle. Sometimes Firefox and Chrome disagreed on the exact position. I had a session with ChatGPT about it and it suggested some clever centering of the letter, but it was never perfect. Especially when zooming the site in or out, the letters wobbled a bit.

I wasn’t satisfied with this, so I decided to go with SVG icons instead. I started searching for SVG icons on the internet, and I found three good circles with letters inside them on Pixabay. They looked really good on the site and I knew this was the way to go.

I particularly liked these icons because the circle and the letter were each their own path layer. This meant that I could specify a unique color for each of these layers.

Unfortunately, there were only icons for the S, C and B letters. The letter P wasn’t there. I thought about making it myself using one of the other SVG as a starting point, but I have never created an SVG before and I barely know what all those parameters in the file mean.

It’s like regular expressions all over again.

Instead, I turned to ChatGPT 5. It had created simple SVG icons for me before. They had to be tweaked with a few additional prompts, but in the end I got what I wanted. The tag icon you see in the bottom left corner button in DeepSID was created this way.

I found an icon for the F letter too, which I thought was close to the P letter icon I wanted. I uploaded the four SVG icons I had gathered from Pixabay and wrote:

ChatGPT thought about it for 46 seconds and then gave me this:

I chuckled a bit and then wrote:

ChatGPT apologized and gave it another shot:

I then decided perhaps it was too much for ChatGPT, so I started searching the internet for a P icon in the same style. I actually managed to find one on Wikimedia Commons. It looked like it was out of the exact same family, but it had one problem – the letter itself was not in its own path layer. Instead, the circle was designed with the letter as a cutout. In other words, I couldn’t specifically set the color of the letter like I could with the SVG icons from Pixabay.

But now I had an SVG icon with a perfect P in it. Surely ChatGPT could convert that into a new SVG with a new path layer on top? I uploaded the new SVG from and wrote:

Part of ChatGPT’s answer:

I gave up trying to let ChatGPT 5 create the SVG for me, although I admit I was hugely entertained. ChatGPT was being unintentionally hilarious. But luckily, the story still had a happy end.

It occurred to me that the cutout of the P letter in the Wikimedia Commons version wasn’t a problem that couldn’t be solved easily. All I had to do was add another path layer as a solid circle, make it a bit smaller than the other solid circle, and then place it behind it. Since the unseen circle could have its color set specifically, the cutout of the P would show its color instead of the background.