A javascript animation I finished recently:




Idea and base animated svg came both from openclipart.
Jarda made this one of a single cube, where each slice was a separate clone of a path in the defs section -moved the parents to a new layer and made them into groups instead for the custom colours.
Also, the original used one animation definiton for both rotating in a full circle -switched that to one spinning and another going back and forth between 15° and -15°.

Quite complicated approach with all the "unnecessary" groupings.
Next step would be using diagonal slicing for a more consistent look. This one uses 3 parent objects so there are plenty of space for fine-tuning the process...

Anyway, I'm satisfied that this one works as I'm totally unfamiliar with javascript animation in general.

Animated kaleidosacope:

Gets a bit laggy at full size, but renders fine when zoomed out a bit:

Notes so far: chrome renders the rotation right, whereas firefox is off-center.

These are scaled down, therefore should render much better:

Fantastic!

Thank you!

Using smil to animate the d value of a path:


original idea came from Dordy


Had problems making the animation work so a couple notes

• keyframes were drawn beforehand as compound paths with stroke only and no fill
• animation was added in notepad++
• that means editing the right path from <path /> to <path><animate /></path>
  whereas the first tag should contain all the original path data
• the "keyframes" need the same number of nodes
• the path needs to have the same structure in the key steps
• that includes path directions, number of nodes in the subpaths, node types and segment types
• therefore for practical reasons every segment was turned curved and the nodes to cusp nodes
• transformations can mess up the animation
• therefore should there be no grouping involved
• that is, better put everything onto the root layer than to any sublayer -not exactly sure about that, however the previous versions that had the animated part on a layer didn't work-
• when pasting in the d value, after the last one don't put a ";" mark
• if the path structure fails, browsers only render the keyframes but no animations in between
• couldn't figure out how to edit time signatures, so now the start and the end frames are inserted in a few times to make them appear for longer
• fraction seconds set doesn't work as the duration
• chrome/chromium renders the animation fine, but gets laggy if a filter is added atop
• firefox renders the animation fluently with a filter added, but fails to have the set transformations
• explorer/edge won't render the smil animation at all

The reflection is especially nice.

Thank you!
That's a masked clone with an overlaying gradient. Tried adding in a wavy filter but it didn't work.

Wow, from that rough sketch you got to this!!! Determining the correlations between bike parts and letters looks super hard to me. Did I count ~ 23 keyframes? How did you make them?

Just 7 keys. Used linear interpolation and tweaked the result to look better.
.

The rest in the animation is duplicates of the two ends so there is a still part.

Thanks

The hardest part for me would have been deciding which part of text was going to become which part of the bike.

Really awesome!

Thank's!

New ones:

Using motionpath this time:






-Too bad these are 2400 px/2400 px and the forum cuts them off?
Tried scaling them down while put inside a group however then the animation doesn't work.

I wonder if the bike text could be 'written' instead of floating in? There's an option to do that with dashes and offsets, as far as I remember

Yes, probably doable. Will you try remixing it?
Having a hard time figuring out what works and what doesn't myself. Can look at existing svg codes, extract the related part, paste it into the new drawing yet still -it just hardly works.
Instead, used the existing animated files and wiped literally everything out except the animation itself and pasted in the new drawing elements.
Wether it was a mismatch in id-s or unsupported grouping, I'm clueless.

My idea was to put more bicycles on the "treadmill", and adding in some phase offset between the animation start-ending time signatures as the next step. Can't think of a possible way of doing so. As, even if the animate motion's time signature can be changed, the morphing animation should follow -which cannot really do that.
Maybe just by adding in more start and ending keys... no, that would mean tweaking every phase's morph animation keys so it'd need a complete reworking.

Trying to insert an audio to this one. So far could make this one work, but have to remake the audio file to fit with the animation. Have it in mp3 but somehow after converting it base64 it doesn't get "rendered" by the browser.

Sorry, Lazur - I'd need to look it all up, too, before I could get started remixing anything or figuring out how to combine these things - and there's so much else that I need to do... Cool that you're now experimenting with sound!

Haha I love the rabbit the most! the last one is nice too!

I cant imagine how hard was it to make the bike?

@Zech
I posted this comment to your feature request, but also posting here, for other readers. It's below.

(For your link, it looks like you messed up the link. If there was a page at google.com that you wanted to show, you'll need to fix the link. I don't know how the browser managed to do it, but it does redirect to your feature request at Launchpad. But we can't see the google page.)
_______________________
Animation for Inkscape is a lllooong standing request. This page has info about how you can currently animate images which were made in Inkscape. https://inkscape.org/en/learn/animation/

There have been a few extensions for Inkscape, over the years. I think there might be one which will make GIF animations easier, which works. Let's see if I can find.....

https://mccormick.cx/news/entries/inkscape-animation -- GIF
https://github.com/pedrosacramento/inkscape-animation -- no clue about this one


This one makes SMIL animation, which is very different from GIF animation.
https://github.com/nathanjent/inkscape- ... -extension

No guarantees about those. They might not even work. I've never tried them. But I think the first one is functional.

Just as an additional comment, everything you showed, except for the actual animation, can be done with Inkscape. It's just not as slick and automated as Illustrator makes it. As I always like to say, notice that price tag on Illustrator. (It's so elite now, you can't even own it!)

It seems like I hear more and more talk (mailing list, meetings) about funded development. Of course you can donate to Inkscape at any time. But it goes into a general fund, and is not targetted to any particular development goal.

But when we have actual, specific funded projects, you can donate for that particular project, if it's one you really want.

fyi - GIMP already has native animation - again, not as slick as Illustrator - but again, that darn price tag says it all!
_______________________

I think Lazur has been trying various different techniques, fwiw.

Exuse me mr. Brynn. But that's not exactly what I mean. I know you can make gifs on gimp. Its the bone system I want.

Anyway enough about the link.

"bone system"??

Since you're asking for extension, that's what made me think you wanted GIF animation. I answered you other recent message about animation, with other info.

Edit
PS - it's Ms brynn