This time I coded it myself: using AI as a teacher

| In Tech
| 7 minute read |by Constantin Gonzalez
Abstract digital landscape with flowing wave-like forms in vibrant magenta, purple, and cyan colors, overlaid with glowing geometric patterns and data visualization elements against a starry black background.

If you’re a returning visitor, you might notice the header image on this blog looks more sharp and crisp—that’s because it is! ✨

After creating my own URL shortener, I wanted to modernize my header image. I built it back then in 2022 using p5.js, but the resolution wasn’t great. Now I wanted a more modern, responsive, and high quality way to implement it, based on SVG and JavaScript.

This time though, I chose a different approach: Instead of telling AI to create my code, I wanted to use this as a learning opportunity for myself: I wanted to create the code myself, and use AI as a teacher only. I’ve never done anything in SVG, and my knowledge of modern web development is quite limited, so why not use AI to catch up on this? Here’s what I learned:

AIs are fantastic teachers!

As part of my initial conversation with Claude 4 Sonnet, I told it:

However, in this project, I would like you to be my teacher: I don’t know much about SVG, and my JavaScript is very limited (I’m more a Python type of guy, you know?). Feel free to be funny, engaging, use emojis, whatever you’d like to use to help me learn SVG and JavaScript (potentially CSS as well) in a fun and productive way.

And it worked great! Claude walked me through the basics of how SVG worked, in a fun tone, and, knowing that I’m literate in Python, applying the right level of complexity and some analogies to help me understand the concepts quickly. I gave it my old p5.js banner-creation code, and together we re-implemented it in SVG with a bit of Javascript. Here’s how the banner works now:

  1. The background: This is a gradient based on “CT_BLUE”, a particular shade of blue I’m using for my blog. It goes from a darker shade on the top left to a lighter tone on the bottom right. I learned that you can pre-declare <linearGradient> tags, then re-use them as fill attributes inside <rect> tags to create the background.
  2. The avatar on the right: I created this back then in 2022 using Bitmoji, but the resolution of 209 x 250 wasn’t great. However, my favourite image editor, Acorn recently introduced an AI scaling feature (think: “Enhance!”, from one of those detective TV series), which gave me a nice, 418 x 500 version after some twiddling (I upscaled to 4x, applied some blur and unsharp masking to get rid of some remaining pixel jagginess, then scaled down again to the desired 2x size). SVG supports <image> tags, which made it easy to add the avatar on top.
  3. The “thinking” sine lines: These were a bit trickier to implement. Claude suggested to put a <g> tag (which stands for “group” and does just that: it groups SVG elements together) into the SVG then use JavaScript to generate the sine wave pattern inside it. Which works great, since I could mostly copy/paste my old p5.js code, adapting it to use SVG’s M (“Move”) and L (“Line”) <path> commands for drawing.
  4. The “CONSTANTTHINKING” text overlay: This turned out to be the main rabbit hole: The original used the Inter font family, so I wanted to use it, too for SVG. However, loading a whole font just to render a few letters felt like a waste to me. So, I learned about some font manipulation tools like FontForge, which I ended up not using. Instead, I learned about the fontTools library for Python, which we used to generate a minimal subset font with just the letters I needed, so I could embed it into my SVG using <style> tags and data: URLs with <text> and <tspan> tags.
  5. The font gradient and shadow effects: were implemented using the same <linearGradient> tag I used for the background, plus a new <filter> tag Claude showed me that made the shadow effect as easy as adding fill=… to my <text> tag.

You can see the result above, I hope you like it!

The details: where the real lessons are

Learning a new technology like SVG was only the beginning. The real lessons happened for me when I asked questions and challenged some of the answers Claude gave me. Here are some unexpected, but highly instructive side adventures I ran into:

  • Pure SVG or SVG + something else?: Originally, Claude suggested to add the avatar image using HTML and CSS to the SVG. That turned out to be tricky to position, so why make it so complicated in the first place? So I pushed towards doing it all in SVG. Simplicity is good.
  • Beware of the shortcuts: When building my own code, I like to declare my constants at the top, and use formulae for derived values, etc. as much as possible. However, in the code that Claude generated, there were quite a few constants and guesstimate values (e.g. for gradient colors) that it sprinkled throughout the code. That’s why writing your own code or at least carefully reviewing it is so valuable: you spot the smaller nits and can make sure the details are right.
  • Fonts are surprisingly complex: My simple idea of minimizing the font to save bandwidth ended up costing me a whole afternoon of trying out things. While I liked the idea of using a tool like FontForge, it turned out to be too complicated to learn yet another tool just because I needed to manipulate a single font. However, I confess that I let Claude write the Python code for extracting the subset of the font. However, after review, I found a fun bug: AI systems like Claude rely on tokenizers for encoding their input. This means, they can’t see letters the way we humans can. This led to an obscure bug in which Claude extracted more than the necessary letters (including the letter “E”, for example). I only found this because we were testing using a string like “TEST CONSTANT” and then I wondered: “Wait a minute: why does it render the character »E«, it’s not supposed to be in there?”. The simple solution, as always, is to write code for the bits AI can’t do: LETTERS = list(set(c for c in “CONSTANTTHINKING”)). Other font shenanigans included dealing with slight differences in how p5.js and SVG render their fonts, using <tspan> for ensuring proper continuation after switching fonts in the middle of the text (vs. computing the width of the “CONSTANT” substring), and more.
  • Browser compatibility: Another concern I came up with was: “what if the browser doesn’t (properly) render SVG?” So I learned about CanIUse.com and its statistics about which browsers were how popular and what features they support. We ended up writing a small browser test suite in JavaScript to detect if the browser lacks some feature we need, so the page can fall back to a pre-rendered image instead of the SVG. As a quick test, you should be able to turn off JavaScript in your browser and reload the page, and still see the header image, but this time as an HTML <img> tag.
  • Content Security Policy issues: Eventually, I was done, and my shiny new header looked great on my laptop. But after deploying it to my staging environment, the fonts were all broken. What happened? Turns out that, like a good web citizen, Claude configured CloudFront to use conservative Content Security Policy headers—which didn’t include my fancy data: embedded subset fonts. A small fix but a good reminder that the devil is in the details.
  • Screenshotting DOM elements is hard: Finally, I wanted a pre-rendered image of the new, SVG-generated header to use for those rare fallback cases when browsers are too old or limited. My initial idea was to ask JavaScript and/or the browser to simply copy the pixels it rendered into a PNG file. Claude suggested to use html2canvas, which we tried out, but then ran into CORS issues which prevented the avatar image from loading. I learned that browsers don’t really support pixel access to the things they render, and that approaches like html2canvas merely re-draw everything into a canvas (hence the name), using some sort of emulation behaviour which started to feel quite finicky to me. So I went down the simple and pragmatic route and did the screenshot manually, myself.

Conclusion

So there you have it: a shiny, new, and modern header image that looks great, no matter what screen size or resolution you use. And a bunch of lessons learned along the way. And I’m sure I’m not done: please let me know (with your OS, browser details, and a screenshot, please) if the header image looks weird to you, there may be some remaining bugs to fix.

When working with AI, it’s easy to just delegate stuff. It may be quick, but you’re missing out on many learning opportunities: from learning a new technology like SVG to optimization techniques to the more obscure rabbit holes of web development.

Andy Jassy, CEO of Amazon likes to say: ”There’s no compression algorithm for experience.” I agree, and might add: ”… but AI is a great experience accelerator!”