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:
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:
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.