You know by now I @Egg you on.
Truly appreciate the effort.
Acorn
Printable View
You know by now I @Egg you on.
Truly appreciate the effort.
Acorn
Hi Tom, yes I know that's possible too however there's still the resolution issue. This way of creating is pure vector and the resolution stays sharp whatever the size. That said there may be an issue of the svg eating up computer memory or cpu so it's a bit of a compromise. However the latest version below runs perfectly on my mobile.
I've also added easing so the train enters slowly from the right and speeds up to the left.
Also added wheels at the back so the train looks more like it's running on the track rather than floating.
Latest Version
Here's the new train, I'm far happier with it now:
Looks good to me Egg.
very good :)
The train looks great Egg. I would suggest maybe a shadow under it but then you might need shadows elsewhere and not sure if it fits with the look you're going for.
I agree the easy resizability of the svg animation is super nice. In Xara I created my animation at 1920x1080 for video but yeah it wouldn't be as easy to export it bigger in the future if I needed also I imagine the file size on the svg animation is much smaller for web use no matter what size it is displayed at. Looking at your page source I thought it would be a single animation file but it seems to be separate files for different parts, interesting. I have not explored svg much so this is all new to me.
Thanks peeps.
Yes Tom, there is in fact 5 animations(1 used twice). Apart from the background image the rest have transparent backgrounds. The total size is 173Kb.
Below is an exploded view of the scene.
DEMO
I added a shadow under the train as suggested by Tom. Better or not?
LINK
I don't think so - it's static, ie anchored to the train; a real shadow would track with the light source and POV, as the train moves along; which sounds like a lot of work without scripts to handle it