TeochewThunder

Monday, 16 February 2026

Web Tutorial: Year of the Horse SVG Animation (Part 2/3)

So far we've animated opacity. We will soon animate linear backgrounds. The running horse deserves a good backdrop and we are going to provide one.

Create a rectangle that fills up the entire SVG, just behind the horse, text and frame. Note that the fill attribute points to skyGradient, which we have not yet created.

Now we're going to create the linearGradient tag skyGradient, inside a defs tag. This gradient begins changing colors at the 50% mark, vertically.

It goes from a deep blue to a purplish blue.

Here, you can see the gradient.

Now add some animation here. It animates the stop-color attribute, changing from deep blue to purplish blue, to brown, then back to deep blue, in the space of 10 seconds, and runs indefinitely. We set the begin attribute to 0 seconds, so it starts right away.

And in the lower regions of the gradient, we also animate the stop-color attribute, going from blue to near-white, then orange, and back to blue.

Here you can see the transitions!

It feels like the horse is galloping through dawn...

... to day...

... to dusk!

We're going to add a sun. Or moon. Whatever, a heavenly body up in the sky. This is meant to help propagate the illusion that the horse is running forward. This takes the form of a circle tag. I've made it a pale yellow, with a translucent pale yellow border.

<rect fill="url(#skyGradient)" x="0" y="0" width="600" height="400" />

<circle r="10" cx="650" cy="100" fill="rgb(250,250,200)" stroke="rgba(250,250,200,0.8)" stroke-width="5">

</circle>

<text x="300" y="30" text-anchor="middle" font-size="30px" fill="rgb(250, 100, 0)" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2">潮州雷祝大家龙马精神!</text>

You won't see anything even if you refresh. That's because the center of the circle, defined by the attributes cx and cy, are outside of the SVG, which is only 600 pixels in width. We're going to animate the position of this circle. The attribute to animate is cx, because we'll be moving the circle horizontally. Set repeatCount to 1; we won't need anything higher than this. For now, the duration should be 5 seconds. Let's name this moon0.

We now create a new animation, moon1. It will run parallel to moon0, and animate the opacity property from 1 to 0. This means that the "moon" will enter the screen from the right, and fade in.

For the next two animations, moon2 runs once moon1 ends, and moves the "moon" all the way to the left side of the screen, out of sight.

The final animation, moon3, also runs once moon1 ends, and animates the opacity attribute back to 1. In essence, the "moon" moves left, out of screen, and fades out.

We then make sure moon0 also runs when moon3 ends, making this entire sequence run indefinitely.

You can see that circle fade in fron the right...

...and fade out on the right as the sky changes!

Now we have a galloping horse, and it looks like it's galloping through night and day! The horse looks like it's galloping through the air. We'll need to plant some ground for it.

Before that, let's define the background colors for the ground. We want it paler green at the top and deeper green at the bottom. And then we want to animate the colors in time to the "sky", so we set both animations at 10 seconds. Both animations cycle through different shades of green at four stages, but the constant is that the upper half of the grassGradient is always significantly lighter than the lower half.

And now let's use a path tag. It goes all the way from the far left bottom of the SVG, stretching to the right end of the SVG. There are curves along the way, resulting in slight bumps. We'll want to use the stroke-dasharray attribute to simulate a fuzzy edge, like grass.

<circle r="10" cx="650" cy="100" fill="rgb(250,250,200)" stroke="rgba(250,250,200,0.8)" stroke-width="5">
  <animate
   id="moon0"
   attributeName="cx"
   from="620" to="400"
   dur="5s"
   begin="0s;moon3.end"
   repeatCount="1"
  />

  <animate
   id="moon1"
   attributeName="opacity"
   from="1" to="0"
   dur="5s"
   begin="0s;moon3.end"
   repeatCount="1"
  />

  <animate
   id="moon2"
   attributeName="cx"
   from="300" to="-10"
   dur="5s"
   begin="moon1.end"
   repeatCount="1"
  />

  <animate
   id="moon3"
   attributeName="opacity"
   from="0" to="1"
   dur="5s"
   begin="moon1.end"
   repeatCount="1"
  />
</circle>

<path d="M0 350
  Q100 340 200 350
  Q300 345 350 350
  Q500 340 600 350
  Z"

  stroke-dasharray="2,3"
  stroke="url(#grassGradient)"
  stroke-width="5"
  fill="url(#grassGradient)"
/>

<text x="300" y="30" text-anchor="middle" font-size="30px" fill="rgb(250, 100, 0)" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2">潮州雷祝大家龙马精神!</text>

Now, we want the path to stretch all the way to twice the width of the SVG. So copy and paste whatever we've done so far to create more points...

... note that for the numbers pertaining to the horizontal positioning, we'll want to add 600 (which is the width of the SVG) to them, while keeping the vertical positioning the same. Then use the L directive to finish out the path.

You see the grassy ground!

Now, this looks weird because in order to complete the illusion of movement and progress, the ground must move with the horse. Envelope the path in a g tag. This will be necessary if we ever want to add any separate objects with the ground, such as a rock, or a shrub. But let's keep it simple for now.

Here, the g tag simplifies the animation, because when we add that animation, it's on the g tag instead of the path. Instead of worrying about what attribute to animate, we use an animateTransform tag and translate it left 600 pixels, in the space of 2.5 seconds. And because 600 is the width of the SVG and we've already made the path twice that in width, when you set repeatCount to indefinite, it seems to go on forever!

More background magic.

Friday, 13 February 2026

Web Tutorial: Year of the Horse SVG Animation (Part 1/3)

It's that time of the year again! Chinese New Year has arrived! 2026 is the Year of the Horse, and I want to work on a nice SVG animation. It's so nice that I'm going to have to break up this web tutorial into more manageable components.

First, we want a galloping horse. No two ways about it. It's the Year of the Horse, after all. From the internet, I obtained this file and scaled it down, then cut out the individual horses to use as frames for the animation. No, I didn't pay for it. I'm also not profiting from this web tutorial, so...

The original image.

horse00.png

horse01.png

horse02.png

horse03.png

This part of the web tutorial shows you how to import external images into an SVG. Let's get the HTML in there. It's a 600 by 400 pixel animation. I set the background to green for visibility. Note that I've included a meta tag for UTF-8. There will be Chinese characters in here.

<!DOCTYPE html>
<html>
  <head>
    <title>Year of the Horse</title>
   <meta charset="utf-8">
  </head>

  <body>
    <svg width="600" height="400" style="background-color:rgb(100,200,0)" viewBox="0 0 600 400" xmlns="www.w3.org">

    </svg>
  </body>
</html>

We want to place horse00.png right here, around the bottom middle.

<!DOCTYPE html>
<html>
  <head>
    <title>Year of the Horse</title>
<meta charset="utf-8">
  </head>

  <body>
    <svg width="600" height="400" style="background-color:rgb(100,200,0)" viewBox="0 0 600 400" xmlns="www.w3.org">
     <image href="horse00.png" x="250" y="300" width="100" height="55">

     </image>
    </svg>
  </body>
</html>

See this?

Now place the rest of the PNG files, all overlapping one another.

<!DOCTYPE html>
<html>
<head>
<title>Year of the Horse</title>

It's going to look a right mess, until...

...you set opacity to 0! At that point, the horses will all disappear.

<!DOCTYPE html>
<html>
<head>
<title>Year of the Horse</title>

We'll then animate the first image with this. This animation has the id horse0, which we'll need for referencing later. We set attributeName to opacity because that's what we'll be animating. It goes from 0.8 to 1, as you can see from the from and to attributes, with a very short duration of 0.1 seconds. It begins as soon as the SVG loads, so begin is set to 0 seconds. And lastly, we set repeatCount to 1. In theory, it should only execute once.

For the next one, we have horse1. It is identical to horse0, except that it begins only when horse0 ends.

And so on, and so for.

Of course, you'll want the reverse animation to make the previous frame disappear. These ones won't require an id. Now when you refresh your page, you'll see the horse animate... but only once.

In here, you'll need an additional trigger. horse0 should run once when the SVG loads... and also when horse3 ends. This will in turn trigger the rest of the animations in an infinite loop!

Because of the reverse animations we added, you can see a shadowy effect of the horse in the animation! Without it, the animation would look a lot jerkier.

Excellent! We have a galloping horse. What next?

We'll do some easy parts first. Let's have some text. It's a simple text tag where I have some Chinese New Year greeting in Chinese text, in orange fill and red outline. In English, it means "Teochew Thunder wishes all the spirit of dragons and horses!"

Cool, right?

Then four red rectangles on each of the corners of the SVGs, leaving a 10 pixel border of space.

<text x="300" y="30" text-anchor="middle" font-size="30px" fill="rgb(250, 100, 0)" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2">潮州雷祝大家龙马精神!</text>

<rect fill="none" x="10" y="10" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<rect fill="none" x="570" y="10" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<rect fill="none" x="10" y="370" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<rect fill="none" x="570" y="370" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />

<image href="horse00.png" x="250" y="300" width="100" height="55" opacity="0">

See this?

And then lines to connect the rectangles.

<text x="300" y="30" text-anchor="middle" font-size="30px" fill="rgb(250, 100, 0)" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2">潮州雷祝大家龙马精神!</text>

<line x1="20" y1="20" x2="100" y2="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<line x1="500" y1="20" x2="580" y2="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<line x1="20" y1="20" x2="20" y2="380" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<line x1="580" y1="20" x2="580" y2="380" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<line x1="20" y1="380" x2="580" y2="380" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<rect fill="none" x="10" y="10" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<rect fill="none" x="570" y="10" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<rect fill="none" x="10" y="370" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />
<rect fill="none" x="570" y="370" width="20" height="20" stroke="rgba(250, 0, 0, 0.8)" stroke-width="2" />

<image href="horse00.png" x="250" y="300" width="100" height="55" opacity="0">

It's actually pretty simple, but the effect is that of a horse galloping in a frame.

That's it for now!

This is actually a good stopping point if it's enough for you. You just need to change the ugly green background to something else. But we're going to seriously improve on this...

Adding a changing sky background.

Monday, 9 February 2026

Web Tutorial: The Valentine's Day Ribbon

It's that time of the year, lovebirds! In a few days, Valentine's Day approaches! Granted, this year's Valentine's Day offering looks rather sparing in effort, but I assure you it was a pain in the ass to make.

I present... the animated Valentine's Day Ribbon SVG. I actually created it with the help of the SVG Maker we made last month, but we don't have to use that if we don't want to. This little SVG can be scaled up or down, and placed anywhere you want!

Here's the file to test the SVG on. We'll link to vday2026.svg, and view it at different scales. The page has a black background, but feel free to test with different background colors too.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Vday 2026 test</title>
  </head>

  <body style="background-color:black">
    <img src="vday2026.svg" />
    <img src="vday2026.svg" width="50" />
    <img src="vday2026.svg" width="500" />
  </body>
</html>

And here we begin with the standard SVG markup. We'll create it as a 300 by 300 pixel image.

vday2026.svg

We will start off by defining some colors. This is the background that we will call valGradient. It's a linear gradient that goes from red to pink.

vday2026.svg

valGradient2 is the exact opposite, going from pink to red.

vday2026.svg

Now that we have our colors, let's start drawing the ribbon. We set the outline to a thick orange line so that we can see what we're doing.

vday2026.svg

The path's d attribute starts with an M directive to move to point (150, 50). The Z directive is to return to point of origin, which is (150, 50).

vday2026.svg

This basically means to move to point (125, 30) but curve towards (140, 25).

vday2026.svg

Let's apply a second curve so that the path should form an "n" shape, like a hill.

vday2026.svg

That's what we should have so far. This is the top left part of the "heart". You should see that we have three of these shapes. The leftmost one is the default size, the middle one is scaled down and the rightmost one is enlarged.

Here's the rest of the points that make up the entire left side of the "heart".

vday2026.svg

Coming along nicely. Bear in mind this is not meant to be perfect, but look kind of organic, if that makes sense.

Without belaboring the point, this is the entire first path.

vday2026.svg

I think it's coming along quite nicely, wouldn't you say?

Here is the next path. It's a lot shorter.

vday2026.svg

...yep.

This last one is the shortest of all.

vday2026.svg

And that's all the paths. But this is visually a little weird. The shading has no continuity.

We rectify this by using the reverse gradient, valGradient2. for the last two paths.

vday2026.svg

Looks good now! Or, at least, less weird.

Now let's just remove the outlines.

vday2026.svg

So far so good...

Now what we need to do is animate the gradients. For valGradient, the first color, as defined by the attribute stop-color, is red. We use the animate tag to animate the stop-color attribute, making it go from red to pink, and red again. repeatCount is set to indefinite to make it go on forever. The dur attribute is set to 4 seconds, though you can certainly vary this if you want.

vday2026.svg

For the second color, we do the reverse. It starts off pink, so we make it go red, then pink again.

vday2026.svg

For valGradient2, we repeat, but in reverse!

vday2026.svg

The romantic conclusion

This is a very small web tutorial, mostly because I didn't see the point of charting out every single point in the path. Still, I hope this illustrates why I enjoy SVGs so much. Even with just a small subset of all the features available, there's plenty that can be done.

Yours pathologically,
T___T

Wednesday, 4 February 2026

No Blanket Solutions

There exists in the spoken language, a supreme contradiction. A sentence that manages to be simultaneously profound in its humility and stunning in its arrogance.

"If I can do it, anyone should be able to do it." - every douchebag ever.

Why is this humble? Well, on the surface, it seems like people who say this are modestly describing their achievements as mediocre. They feel that they're not special, so if someone as unexceptional as them can do something, there's no reason why most other people wouldn't be able to do it. For example, I quit smoking almost two years ago. I did it far easier than many people did, with no lingering physical or psychological side-effects despite having been a pack-a-day guy for the better part of twenty years. No discipline was required; the struggle was non-existent for me. However, I'm also reasonably certain that this isn't that uncommon. There are plenty of people, wired the same way as me, who could accomplish that. Acknowledging that you're not special, is humility.

Why is this arrogant? At the same time, if I were to claim that I quit smoking without much fuss, and there is something wrong with people who can't simply follow my example; that's a problematic stance to take. Assuming that oneself is the standard on which everyone else should be based around, is both immature and pretty egoistical. It lacks self-awareness.

And both positions are wrong.

We're not all the same.

They're wrong for the very uncomplicated reason that we're all built different. We don't all come off some assembly line with the exact same characteristics. There are significant variances across data points like culture, upbringing, physical and environmental.

For example, people who spent their formative years in a Southeast Asian multicultural country like Singapore or Malaysia would have significantly less trouble picking up a third or fourth language as opposed to, say, an Englishman born and bred in the UK. Incidentally, that's why people coo and act impressed when a white guy speaks Mandarin (even if his pronounciation is dogshit). Whereas nobody bats an eyelid when an Asian guy speaks English well. Why? Because a white dude even attempting to speak anything other than dodgy English is impressive, whereas for an Asian guy it's just another Tuesday.

Is it fair? Well, of course not; but if we're going to acknowledge that everyone's built different, then nothing is fair.

The tech space

"There are no blanket solutions" is a favorite refrain of mine, because it's true especially in the tech space. You can have all the best practices in the world, but they have to be evaluated against the exact context in which you're applying them. The concept of best practices is a good thing, don't get me wrong, but only if not applied blindly.

Frameworks aren't always the way to go; I've said this before over and over. They're often the way to go in software development, but not in every situation.

Not every data storage solution has to include a database.

Not every 2FA solution
looks the same.

Not every 2FA solution looks the same - some involve texts to mobile phone and some involve a third-party authenticator app.

You wouldn't use Python to code every damn thing, just the same way you wouldn't use Java to do it. At least, I hope not.

While we're at it, almost every organization's implementation of Agile Methodology looks different from the next.

But while all I've said so far is uncontroversial, that's for the tech space. The software development context.

In a personal context

Someone once told me he wanted to be like me. I had a place of my own. I was doing well financially with no debt. While I wasn't filthy rich, I spent money without needing to think too hard about it. And above all, I was chill. I didn't let what I didn't have, bother me too much.

And all that was before I got blissfully married and really started stepping up my game at life.

Possibly, to an outsider who was just watching me live my life, it looked like I had everything without needing to turn to drugs or alcohol in order to cope. Furthermore, it looked like all that was needed to achieve what I achieved, was to live my life the way I did. Sadly, I had to disabuse this person of that fantasy. He was not going to achieve the same things I did by living like me, simply because he wasn't me.

There's more than
one path to the
rainbow.

My achievements aren't spectacular by any means. An apartment, a job and a spouse. Spare cash in the bank. The means to take care of my immediate family. These things are achievable by the vast majority of people. All I've really done is earn as much money as I can while living a very modest lifestyle. And that's the hard part.

You see, not everyone can, or wants to, live life the way I do, as if I were still drawing an income of just under SGD 3,000 a month. It takes a specific kind of person to happily sacrifice pleasure for stability. Not everyone has the same experience and needs. Not everyone has the same personality. I know plenty of people who would struggle mightily with a simple existence.

Overseas vacations, wine and cheese, cab rides, expensive pets, gym and club memberships - I won't miss any of those things because they're not the kind of things a guy like me cares about. But again, not everyone is like me in this regard. And honestly, for the sake of Singapore's economy, I really hope not. (Part of the reason why I can live the way I do, is because other people have this habit of buying pricey shit they don't need. So keep on doing what you do, guys; you're awesome.)

Therefore, it's not a simple matter of glibly saying "live life this way". Not everyone will take to my chosen lifestyle the way I have, or reap the exact same rewards from doing so. Why should anyone travel the same path and have the same outcomes as me when they're fundamentally different from me? That makes no sense, does it?

In a nutshell...

The mistake most people make is to assume that everyone wants the same things that they do, or at everyone is built the same way. That's why you have well-intentioned but severely misguided people going around advising others to have kids or go to Church or become a vegetarian because those things have benefitted them... and they assume that these things will benefit other people in exactly the same way.

People can certainly achieve the same things I have, or more... but they're going to have to find their own pathway to it.

Stay unique,
T___T

Friday, 30 January 2026

A Software Developer's Vacation in... Singapore (Part 3/3)

Another day of my vacation was spent covering the locations I hung out at from the entire year of 2012 and onwards. In the next few years, I would shuttle from company to company, never staying more than a couple years at each one.

2012 to 2013

These were the first years I spent away from the Beach Road / North Bridge Road area.

Novena/Balestier area.

In 2012, I found a job in Goldhill Plaza, in the Novena area. Goldhill Plaza looked pretty much the same when I visited. It's still the color of salmon, shaped like a giant penis reaching up to the sky. I got a kick out of taking a walk around the base of the "shaft" to soak in the vibes of where I used to take my smoke breaks.

Goldhill Plaza

Velocity

In the vicinity, Velocity was as fancy as ever. I never bothered much with that place, or with United Square, though I had a soft spot for the Katong Laksa outlet there. It seems that post-pandemic, prices have risen alarmingly. It's now seven bucks for a small bowl. You know what, at my age I think I could stand to eat less laksa.

Laksa at
United Square

A short walk away, Balestier Road beckoned. The entire stretch, when I last hung out there in 2013, was a throwback to an age long gone. That was where I met my buddies for supper and drinks after a long day in the office. When I last left it, modernity had started to creep in, in places such as Zhongshan Park, which, to be fair, is really pretty.

Zhongshan Park

Balestier Plaza

However, a lot of the old stuff is still there. Balestier Plaza is one such example. When I visited, I had a rollicking good time wandering its cold empty halls and soaking in the retro vibes. Aside from that, the entire area has a lot of old architecture. It seems to be one of the areas that the Singapore Government has never been able to fully get its mitts into.

This was the final part of my tour for revisiting former offices in this area. This next part was set solidly in the east. Interestingly, it was all around the Tai Seng and MacPherson area up till the year 2017.

Paya Lebar Road

2013 to 2014

During this year, I ended up at this grand-looking building known as Starhub Green. It was pretty modern and upscale - glass walls, glossy foyer, hipster cafes. I remember ending up here and thinking, rather naively, "I've made it!"

Starhub Green

Honestly, I didn't hang out at this area any longer than I really needed to. This was merely another stop on my quest to ascend the pay scale.

2015 to 2016

The next company was at Tai Seng, at least until they folded. We were at this building, and visually it was a pretty big downgrade. LHK2 is a long oblong on the map, and pretty easy to miss if you don't know what you're looking for.

LHK2

It sure was nice to see their smoking point again, though. What fond memories I have.

LHK2's
smoking point.

The surroundings were more ghetto than the last one, but I expect this was just a matter of what the company could afford. I didn't hang out here; this was the year I was studying for my Specialist Diploma in Mobile Apps Development and I just didn't have the time. At the time I was working there, most of the surroundings were under construction - that day in December when I visited, places like Tai Seng Point had sprung up.

The tragedy was that I had been planning on serving my time with this company until the time came to move on. It was one of those ruthless business decisions where I use a company as a springboard to bigger and better things. Unfortunately for me, they crashed and burned before I could pull the trigger. Kind of like your spouse dying and turning you into a widow/widower even though you already planned on a divorce.

2017

Next I was at Vertex. It looked just the same as ever in 2025, as it did back in 2017. It's a huge building that houses numerous showrooms at the ground level, and tons of smaller company offices squirreled away in its upper floors. And one of those companies was a startup I worked in.

Vertex

This was the company I actually had more of a soft spot for, as opposed to the last two. This one was at a tech startup where I was finally working alongside people who knew as much as me, or more. I was here less than a year, but this was where I stepped up the intensity back to 12-hour days, almost 7 days a week, because I enjoyed the work and I enjoyed my co-workers.

After 2017, I ended up back in Bugis area, where I hung out with my new colleagues at the new Funan and sometimes ate at Peninsula Plaza together. And thus I spent another three years until COVID-19 hit the world.

2020 to now

I've spent it mostly working from home and hanging out around my neighborhood, as stated at the beginning. Which was why I wanted to go get to know my island again.

I visited other places from my past during my vacation, of course. My old schools were I spent my formative years, my late grandfather's old estate, my late grandmother's neighborhood... all of these held delightful memories as new developments were juxtaposed among the old (and some ancient) ones.

In conclusion!

This wasn't just a vacation in Singapore. This was a retreading of old stomping grounds, making contact with my past and taking the time to appreciate how I got here.

In these days, I relived the career struggles I experienced, and marvelled at the obstacles I had to overcome. Sometimes we all need that moment of introspection. To remind ourselves that if we've come this far, we can totally do this.

It's okay to vaykay!
T___T

Disclaimer

All opinions expressed on this blog are mine, and mine alone. Deal with it.

All technical information and code are written at my current level of understanding and may be incomplete. Some of it has been deliberately kept simple for clarity. Don't hesitate to correct me.

My experiences may be limited, and as such there may be blind spots in my reasoning. Feel free to disagree.

I'm not being paid to write this blog. This is purely a leisure activity. Keep your expectations low.

This being the Internet, someone is bound to take offense. The Web's a big place, and you're all big boys and girls. Seek life elsewhere.