TeochewThunder: MS Word

Now that the logo for TeochewThunder has been changed, for this month's web tutorial, we will be examining the process behind the new SVG logo. This is basically a XML file that your web browser will display as an image. Today, not only am I going to show you how to produce it, I will show you the little hacks I employed along the way.

And the beauty of this is, you just need a text editor. The file will be saved with a .svg extension, and you can open it in your web browser.

We begin with the svg tag. The version and xmlns attributes are important here, for this to be rendered correctly by the browser.

logo2.svg

We set width and height of the SVG.

logo2.svg

Now, we could just get right to drawing the SVG, but let's exercise some developer prudence. Let's create a grid of lines to aid us visually. These are a series of horizontal lines that run through the SVG, each spaced 10 pixels apart.

logo2.svg

This is being viewed at 300% scale.

Now for vertical lines.

logo2.svg

Now we have a nice grid! Effectively what we have here are 10 pixel squares.

Start a path tag with an empty d attribute and set the fill attribute to the infamous TeochewThunder orange!
logo2.svg

Now that we have a grid to work off, it should be easier. We start at (0, 0). Use "M" to move the cursor to (100, 0) - which is 10 squares to the right and 1 square down. Then use "l" to move 90 pixels back (9 squares) and no squares vertically. Then use "l" again to move 40 pixels (4 squares down. Add a "Z" to signify a return to the origin, and you'll get this triangle!

logo2.svg

The first "T" is taking shape, and we are moving right to the underlined part.

logo2.svg

Now we're taking care of the jagged part of the "lightning bolt". For this, we move the line to the right and up, then horizontally left, then right and up again.

logo2.svg

A few horizontal and vertical strokes later, we're almost done with the horizontal crosspiece of the second "T", and on course to complete the first "T".

logo2.svg

This is where you do a little bit of trial and error, mirroring the slanting of the "lightning bolt", but in reverse.

logo2.svg

That's actually the hardest part - the rest is all horizontal and vertical strokes.

logo2.svg

What we do now is remove all the grid lines...

And here's your (or rather, my) SVG in its final glory!

Now let's test this with HTML. Create this file wth a black background (or any color, really, other than orange).

tt_logo.html

<!DOCTYPE html>
<html>
  <head>
    <title>New T___T Logo</title>
  </head>

  <body style="background-color:black">

  </body>
</html>

And add in the SVG file that we created, but in different sizes, for testing.

tt_logo.html

<!DOCTYPE html>
<html>
  <head>
    <title>New T___T Logo</title>
  </head>

  <body style="background-color:black">
    <img src="logo2.svg" />
    <img src="logo2.svg" width="300" />
    <img src="logo2.svg" width="100" />
  </body>
</html>

Here, you can see the "S" part of SVG - "scalable", that is. No matter how big or small it is the logo remains crisp and sharp!

Final words

I like this new logo, and I thought the process of making it could be a good learning experience. The original will always have a place in my heart due to the lighthearted moments it was inspired from. But perhaps it's time for this blog to grow up, just a bit.

Ta___Ta for now!
T___T

TeochewThunder's logo has changed. You heard it here first! Well, duh.

More than ten years have passed since I first started TeochewThunder. Back then, the logo looked like this.

I was going for something whacky in my favorite color, orange. Thus, the crying-face emoji "T___T" became my goto. And I used some super-basic text art creator (was it MS Word? I really can't recall) to put that cheeky bend on it.

The time has come for a slight change. I still want that "T___T", but I want the second "T" to look like a lightning bolt! Teochew "Thunder", right?

I'd been thinking about a brand renewal for a while now, but never quite got round to it. Mostly because while the first logo was a complete rush job and very casually done, it really grew on me the last decade. Especially when I saw it in browsers or on my mobile.

The Favicon in browser.

The Favicon in mobile.

The end result was that I kept putting off the task of creating a new logo, and implementing the change. Why fix it if it ain't broke, amirite?

That one final push

As it turned out, the choice was made for me. My trusty faithful Lenovo died, and with it the source file for the logo. This meant that if I ever wanted a fresh copy to resize or whatnot, I would have to work off existing exported images. Not exactly ideal.

Thus, I bit the bullet. This time, I created an SVG. This meant that as long as I had the formula for the SVG, I could recreate it from anywhere. All I had to do was save it to my GitHub account, and I was good for eternity. And also, being an SVG, it could be scaled up and down infinitely with no loss in quality.

New Favicon in browser.

New Favicon in mobile.

The rest of the month was spent replacing the logo everywhere I found it. I replaced it on GitHub, Trello, and on the signoffs of my blogposts. And of course, the Favicon. However, I'm too fond of the old logo to totally let it go. What I'm going to do is leave it as legacy, but use the new logo for all other content moving forward.

Keep Thundering On!

When I first learned how to make SVGs, it wasn't with this express purpose in mind. But I'm glad I invested that time and effort.

Stay iconic,
T___T

TeochewThunder

Pages

Sunday, 31 August 2025

Web Tutorial: The new TeochewThunder SVG logo

Final words

Monday, 25 August 2025

The TeochewThunder Logo Change

That one final push

Keep Thundering On!

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews