Simple drift bottle demo using SVG SMIL Animation

svg-drift-bottle

I was told to create a minisite to celebrate the lunar sub-new year, which you get blessings from the new media of our school.

So I thought it would be nice to explore SVG SMIL Animation. Here is what I got eventually.

Testing on Android TBS (the default WebView used in mega app, WeChat) and Mobile Safari is a pain in the ass,

for they are super bitchy about fromats of SVG attributes.

I was a bit of rushing time, but the page needs to fill and spread the entire viewport.

But there are so many of them! I spent most of the time on making transitions to wired screen ratios and browsers.

So I did what I had to do.

Dynamic font size! Default serif font! (Well it looks great in Chinese, so...) Experimental CSS features! ID selector all over the place! Quirky usage of flex!

Yay, why not? Once you have touched the chaotic coding style when creating amateur web pages, you can never go back.

The texts used in the modal panel are selected from paragraphs of an essay full of gibberish.

I found it the perfect painkiller whenever I feel headache for generating Chinese Lorem Ipsum.

Don't panic, you can replace them with you own texts in the JavaScript part.