Shop Mobile More Submit  Join Login
20 Purchase Purchased Download Purchase Soon
699 KB ZIP File. Includes SVG
View Attachments
Tutorial Clouds 4 Interactive.svg
3.8 MB
Add Your Rating! Thanks for Rating! Change Your Rating
Download SVG download, 3.8 MB


Submitted on
September 24, 2012
File Size
3.8 MB
Submitted with


105 (who?)
Tumblr Tutorial 5: Clouds (Interactive) by MisterAibo Tumblr Tutorial 5: Clouds (Interactive) by MisterAibo
Download the SVG for the tutorial.
Should work on pretty much anything expect IE. I advise using Chrome.

The file is a bit larger than you would expect. Since there is no loading bar, you might have to wait a few moments, depending on your connection.

This tutorial is a part of my Ask the Professor Tumblr weblog. You should probably take a look there if this interests you.

Any thoughts on this are appreciated, as always.

--- Note
I actually have a half-finished fully interactive cloud - you click an object, it shows you outlines, gradients, nodes and all of the other useful things. I might finish it if people would like me to.

--- Idea
I really wanted to try out animated interactive SVG as a presentation platform to use in school. I was also doing some research into viewBox, which works as a "camera" of sorts. Moreover, the tumblr has some problem with wide images. I wouldn't want people to have to use the scroll bar.
One last thing was that while most of my tutorials go from top to bottom, this one turned out going the other way. Which is pretty hard to do unless you want to pull the whole "read from bottom to top!" thing. Which I don't.

--- Technical
The basic image looks like you would expect it to. Open it in inkscape to see the whole thing. The transitions are made by animations, which change the viewBox attribute through time. This allows the image's point of view to shift, even zoom in and out. Each animation is triggered by clicking the button, which calls an ecmascript (kinda like javascript, much easier to use, less options though) function that uses the even's id as a clue to which animation should be started. Since the animation uses freeze fill and other animations go from same viewBox position, you won't notice the animation's end.

--- Thoughts for next time

:bulletred: ecmascript is somewhat limiting, so I can't - for instance - have the tutorial work with keyboard keys for navigation. Also, I adress a frame directly by doing something like "tutorial.svg#chapter9".
:bulletblue: Solution: using javascript instead, but ecmascript is much less complicated when it comes to the things I usually need.

:bulletred: The transition animation seems to be a bit jerky on Opera and Firefox. This is probably because of the splines I use instead of linear timing.
:bulletblue: Solution: don't use splines. But I just really like the feeling it has. Not to mention that linear timing actually jerked a bit in Chrome. Peculiar.

:bulletred: The few (two) bitmaps that are included jerk during the transitions as well.
:bulletblue: Solution: try not to use bitmaps. Vector the whole of inkscape interface in future.

:bulletred: For an "interactive" SVG, this one is not that interactive. It's basically just a presentation front-end.
:bulletblue: Solution: stop being a lazy bastard and make something spectacular. (Will do in the animated tutorial about animation.)

:bulletred: The interface could use some cleanup. It looks like it was made in 1990s.
:bulletblue: Solution: stop being a lazy bastard.

--- Premium Content
The premium content includes the same SVG as the download. By paying for the premium, however, you would support my other animation/interaction/tutorial endeavours. For which, I would be eternally grateful. It's not that much anyway.

--- Time taken
Image: 2 hours
Text: 1 hour
Interface and animation: 4 hours
Debugging: 2 hours
Add a Comment:

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

sistemx Featured By Owner Apr 24, 2013
shape = document.getElementsByTagName("svg")[0];
shape.setAttribute("viewBox", "-7000 -7000 9500 8050");shape.setAttribute("width","9000px");shape.setAttribute("height","9000px");

MisterAibo Featured By Owner Apr 24, 2013
Well, yes. How did you think it worked? It's a bloody large image. :)
ShyneLight Featured By Owner Feb 22, 2013  Student General Artist
Click download file to receive Joy!

meldoymoon Featured By Owner Jan 10, 2013  Hobbyist Digital Artist
I wish I could bye this
MisterAibo Featured By Owner Jan 10, 2013
Technically, you don't need to. The premium SVG is just a way for me to make a few points on the side - the file is identical to the regular download.
DarkDragon774 Featured By Owner Dec 27, 2012  Hobbyist General Artist
:o My word, this makes so much more sense and things so much easier!
Thank you for this amazing tutorial!
MisterAibo Featured By Owner Dec 27, 2012
No problem. I always enjoy sharing knowledge.
Soren-the-Owl Featured By Owner Dec 15, 2012  Hobbyist Digital Artist
for some reason, i cant find the shape option called "from clipboard"
MisterAibo Featured By Owner Dec 15, 2012
Can you see the other shape styles? Triangle in, triangle out? Do you actually have some shape in the clipboard? Can you send me a snapshot?
Soren-the-Owl Featured By Owner Dec 15, 2012  Hobbyist Digital Artist
i dont see a shape option on inkscape

Add a Comment: