An Ode to Canada - in CSS

Hockey Is Our Game

It’s February 20th, 2025. TD Garden in Boston. Championship Game of the 4 Nations Face-Off.
We've got a team of clutch players, but I’d be lying if I said I wasn’t holding my breath in OT.

Tensions are high, and we all know why.
Our last game with the States started with three fights within the first 9 seconds and unfortunately ended in a loss.
Only adding fuel to the fire.

And as if it were written in the stars, Marner to McDavid for the OT winner to bring it all home!
I think Canada collectively let out a sigh of relief and immediately rejoiced in what we knew to be true:
Hockey is our game.

Being Canadian in 2025

I've been Canadian my whole life and am proud of it.
Being Canadian means a lot of different things to me.

Loonies and toonies. Poutine, Double Doubles, and Ketchup Chips.
It’s heading up north for those highly coveted weekends in Muskoka.
A day on the lake with a couple of beers — water on the water, beer on the pier.
Evenings by the fire, surrounded by friends and family, sharing new and old funny stories.

Do we have painful chapters in our past? Absolutely.
As a country, we acknowledge them and we keep working to do better, to grow, and to move forward with honesty and intention.

We are a mosaic.
Colourful tiles pieced together with acceptance.
We may have our differences, but we approach each other with a willingness to understand and learn.

We’re famously kind and, yes, unapologetically apologetic.
Tossing around unnecessary "sorrys" wherever we can.
We wear our legacy of global peacekeeping with quiet pride.

But that kindness should not be mistaken for weakness.
We don’t pick fights, but we stand our ground, elbows up.
We are a nation built by people who came here seeking a better life.
Forged and hardened by harsh winters, yet unmistakably kind.

In 2025, we face harder times, but that doesn’t change who we are at our core.
These are the principles woven into the very fabric of who I am.
Who a lot of Canadians are.

The Origins of This Project

Now you can understand why, for me, including a nod to my national identity online is important.
That said, writing Proudly Canadian in 12pt Times New Roman at the very bottom of my company's footer just didn’t feel right.

Cue me stumbling across this on CodePen by Lynn Fisher
And it all clicked - I needed to make an online version of an embroidered Canadian Flag.
It’s a rite of passage for Canadian backpackers to get this patch and sew it onto their gear.
It’s a unifying symbol for Canadians abroad - connecting us, wherever we go.

Bringing the Vision to Life

I’ll admit, this side project at some points became my main project.
Even with project management experience, I find managing my own passion projects challenging. They’re often driven by enthusiasm, with an end goal that isn’t always clearly defined.
Without a client or deadline to deliver to, my perfectionism tends to take over.

The silver lining is that I came up with several patch ideas!
Building on the embroidered look, I created a Proudly Canadian camp-style badge.

Sidenote: If you'd like to see all of my badges - Click Here

I’ll be honest, this project took a lot of time.
the CSS involved in this was laborious.
There are thousands of lines of code, efficiently created of course, because the best way I found to achieve the cross-stitched pattern was by creating tiny, pixel-sized gradients that emulate each individual stitch.
The color shifts throughout each stitch to mimic the 3D effect of light hitting the thread at different angles.
This gives the design depth and texture, even though it’s entirely code-based.

Heres an example of a couple lines of code:

      linear-gradient(to right, #a30318, tomato, #d80621) 99.5px 43px / 1px 1px,
      linear-gradient(to right, #a30318, tomato, #a30318) 99px 44px / 2px 1px,
      linear-gradient(to right, #a30318, tomato, #d80621) 98.5px 45px / 3px 1px,

This is the very top of the Maple Leaf.
You can see how the color brightens in the middle where the simulated light is hitting the stitch.

Closing Thoughts

Its been just over three months since the Championship Game of the 4 Nations Face-Off.
The Buy Canadian campaigns and Proudly Canadian website tags are quietly fading from the spotlight in corporate messaging.
If the conglomerates of Canada want to move on, let them.
Canadians still want to feel unified in moments like these, and we don’t need a political or corporate leader to tell us to do so.

Symbols are a simple yet powerful way to foster that unity, and we have the perfect one right in front of us: our flag.
We need to keep trying to understand our neighbours, even if they dont full understand us.
We need to lead and show the world that we stand in solidarity — that we are peacekeepers, strong and free.

Buy The Badge

I sell my CSS badges on my website for about the price of a real badge — $5
Badges: Click Here
Setup instructions for Shopify, Webflow, Wix, and custom sites included.
If you have any questions or need help with them, feel free to reach out.
You can see an example of the small Canadian Flag Badge in the footer of my website.