animated svg-s

Show off your finished Inkscape work.
Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

animated svg-s

Postby Lazur » Sun Dec 03, 2017 11:15 am

A javascript animation I finished recently:

SVG Image


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.

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Sun Dec 03, 2017 3:53 pm

Animated kaleidosacope:

SVG Image

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Sun Dec 03, 2017 4:35 pm

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

SVG Image

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Mon Dec 04, 2017 12:44 am

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

These are scaled down, therefore should render much better:





SVG Image


SVG Image

tylerdurden
Posts: 2057
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: animated svg-s

Postby tylerdurden » Mon Dec 04, 2017 2:08 am

Fantastic! :mrgreen:
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Mon Dec 04, 2017 6:01 am

Thank you!

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

animation

Postby Lazur » Mon Jan 08, 2018 10:16 am

Using smil to animate the d value of a path:
SVG Image

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

tylerdurden
Posts: 2057
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: animation

Postby tylerdurden » Mon Jan 08, 2018 12:26 pm

The reflection is especially nice. :)
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animation

Postby Lazur » Mon Jan 08, 2018 12:42 pm

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

Moini
Posts: 2725
Joined: Mon Oct 05, 2015 10:44 am

Re: animation

Postby Moini » Mon Jan 08, 2018 1:07 pm

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?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animation

Postby Lazur » Mon Jan 08, 2018 1:23 pm

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

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

Moini
Posts: 2725
Joined: Mon Oct 05, 2015 10:44 am

Re: animation

Postby Moini » Tue Jan 09, 2018 12:16 am

Thanks :)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
brynn
Posts: 9905
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: animation

Postby brynn » Tue Jan 09, 2018 12:17 pm

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

Really awesome!

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animation

Postby Lazur » Wed Jan 10, 2018 9:20 am

Thank's!

New ones:

SVG Image

SVG Image

SVG Image

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Thu Jan 11, 2018 6:49 am

Using motionpath this time:

SVG Image

SVG Image


-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.

Moini
Posts: 2725
Joined: Mon Oct 05, 2015 10:44 am

Re: animated svg-s

Postby Moini » Thu Jan 11, 2018 11:49 am

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 :)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Thu Jan 11, 2018 12:05 pm

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.

Lazur
Posts: 4559
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Thu Jan 11, 2018 1:03 pm

SVG Image

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.

Moini
Posts: 2725
Joined: Mon Oct 05, 2015 10:44 am

Re: animated svg-s

Postby Moini » Fri Jan 12, 2018 1:27 am

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!
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
NathanMc
Posts: 11
Joined: Tue Jan 02, 2018 11:53 pm

Re: animated svg-s

Postby NathanMc » Mon Jan 22, 2018 8:00 pm

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

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: animated svg-s

Postby Zech » Tue Feb 06, 2018 5:30 am

I cant imagine how hard was it to make the bike?
Last edited by Zech on Sun Feb 18, 2018 12:36 pm, edited 2 times in total.

User avatar
brynn
Posts: 9905
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: animated svg-s

Postby brynn » Tue Feb 06, 2018 9:50 am

@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.

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: animated svg-s

Postby Zech » Sun Feb 18, 2018 11:57 am

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.

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: animated svg-s

Postby Zech » Sun Feb 18, 2018 12:37 pm

Anyway enough about the link.

User avatar
brynn
Posts: 9905
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: animated svg-s

Postby brynn » Sun Feb 18, 2018 6:26 pm

"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 :D


Return to “Finished Inkscape Work”

Who is online

Users browsing this forum: No registered users and 1 guest