background animation in my portfolio site

three possibilities, which one ist best? CSS, SMIL or JS

5. November 2018

I like the slogan - and often heard and sometimes told it, too:
"The first thought is the best thought (Der erste Gedanke ist der beste Gedanke)."

When I came to the decision to build my own portfolio site with Django, I also wanted to make it as responsive and feature rich as possible.

So my primary goal was to make it look simple but under the hood there shall be some shimmering features.

First thing was to define a background image.

And because a simple image was not eyecandy enough for my demands, I wanted to put some animation into it.
This animation tells the story about who I am and what feeling I'd like to transport to the viewer of my site.

Most decisions we make out of experience. So my experience told me to use SVG.js.
I created a quick test html file with embedded Javascript and voilá, it was quite impressive on the first run.

So I also wanted to check, if there are other technologies to animate a homepage. And I found SMIL and CSS animation, both are other - let's say strategies.

But they have limits:

So, back to my first, already working thought - Javascript!

I had to fiddle around with DIV layers, because using CSS-Background would not work with animated SVG.
But templating with wagtail and django is quite easy to modify individually.

I've used The Gimp

Then with Inkscape I checked out the path and simplyfied it a bit.

Putting it all together with SVG.js's tutorial and examples is straight forward.

Compatibility with many browsers is okay, so my first animation with a simple background idea was realized.


no analytics