Christmas Card made with HTML, CSS, and SVG

Christmas Card made with HTML, CSS, and SVG

TL;DR;
I've created an animated Christmas card using only HTML, CSS, and SVG.
You can check it out here.

Couple years ago, I created a Christmas Card. It was minimalistic vector artwork created in Adobe Illustrator:

The Christmas Card artwork in Adobe Illustrator
The Christmas Card artwork in Adobe Illustrator

Back then, I also created a simple animation. I used artwork as a background. Added shooting star and harts floating on air. Those effects were easy to do, but added a little bit of life to the card.

Moving forward to present time, I started wondering how hard could it be to recreate the animated card using only HTML, CSS, and SVG. Couple evenings later, it turned out, it was not:

Merry Christmas from Michal Tynior
This Christmas card was created using only HTML, CSS and SVG.
Screenshot of the Christmas Card created with HTML, CSS, and SVG
Christmas Card created with HTML, CSS, and SVG

It's not perfect, but works on all modern browsers, and nicely adjusts to different screen sizes. If I had more time I would polish the animations and definitely do something with the clouds, as now they are definitely the worst part of the card.

Beside those imperfections, I'm really happy with overall result.

The entire source code can be found on my GitHub. I also posted simplified version on CodePen.


Comments

Anything interesting to share? Write a comment.