Line Animator (draw by invisible hand)
Maren Hachmann
Create simple, line-drawing animations for the web from selected paths. When you look at the file that you've applied the extension to using a web browser, it will look as if someone were drawing the paths with an invisible pen. Notes: * Find the extension as `Extensions > Animation > Line Animator` * **Only path objects** can be used for this. * **No path effects** should be applied to the paths (something may happen, but perhaps not what you expect). * The paths must have **a visible stroke** (else you won't see anything happen). * The object **lowest in stacking order** will be drawn **first**, then the one above it etc. * Animation speed can be changed by using the same animation name and selecting the same objects, then setting a different duration. * If you are animating a path consisting of **multiple subpaths**, all of them will start to be animated **at the same time**, but the shorter ones will finish first. * If you want to **change the direction** in which a path is drawn, change the path direction in Inkscape (`Path > Reverse`). Examples -------- See https://gitlab.com/Moini/ink_line_animator/-/blob/master/README.md Installation ------------ Drop the files `line-animator.py` and `line-animator.inx` into your user extensions directory. Learn where to find the directory in Inkscape: `Edit > Preferences > System > User extensions`. License ------- This software is licensed under the GPL v2.0 or higher. Note ---- Due to a bug in Inkscape (https://gitlab.com/inkscape/inbox/-/issues/9327), Inkscape 1.3 instantly crashes when you open the Selectors and CSS dialog. So don't do that!
Comment here...
endless knot
Lazur
With a hue rotation animation. No clipping or cloning is used, in order to make the image simple enough for browsers to render without any issue.
Comment here...
1.3 anniversary edition animation
Lazur
"Celebrating 20 years of Inkscape" Based on the About Screen: Inkscape 1.3 by Denis Kuznetsky. https://inkscape.org/~inkscape/%E2%98%85about-screen-inkscape-13 Animation made with inkscape and blender.
Comment here...
Rabbit Hole
Lazur
A filter animated by an <animate> tag modifying a huerotate value in the filter chain. How deep is the rabbit hole? Time to explore.
Comment here...
endless knot animation 2
Lazur
Tried involving some turbulence although it gets lagging a bit at full size. Animated filter ftw.
Comment here...
XIA
Pascal Fautrero
XIA is an extension making possible to convert svg file into two kind of html5 resources : - mini html5 games (based on drag and drop or click principles) - interactive images (with zoom effect on details) downloads : http://xia.funraiders.org
Comment here...
Yet Another SVG+JavaScript Clock
Fabien Fellay
Click on the magnifying glass icon (below the artwork) or select 'open the link in a new window' in your browser for accessing the interactive animation. This interactive document is a SVG live clock inspired (though different) by the Swiss Railway (SBB CFF FFS) iconic station clock by Hans Hilfiker. See <https://www.sbb.ch/>. The document also features vectorized portions of the free and open source font 'Fira Sans' (light weight used). See <https://carrois.com/typefaces/FiraSans/>. The hand colors are chosen according to the RGB canonical color scheme. It is a mnemonic: Red for seconds, Green for minutes and Blue for hours. A JavaScript dynamical simulation is running in order to animate the clock hands. Click on the hands to perturb them. Ctrl+click changes the direction of the perturbation. Shift+click increases the perturbation impulse amplitude. Ctrl and Shift can be combined. The (embedded) script for the dynamical simulation uses Math.js (version 3.16.4, embedded as well): <http://mathjs.org/> V1.0 (04.10.2017): Initial Design V1.1 (06.10.2017): Design Update (the initial version was identical to the SBB CFF FFS clock, leading to potential copyright issues) Copyright (C) 2017 by Fabien Fellay The script is licensed under the GNU General Public License version 3 (GPL-3.0). <https://opensource.org/licenses/GPL-3.0> <https://www.gnu.org/licenses/> The artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/> --- Curated by Martin Owens on October 6 2017 2:55 PM
Comment here...
Chromatic Aberration with Rotating Figures Demo
Fabien Fellay
This is an animated SVG featuring the Chromatic Aberration Filters available here: <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-filters> The document also contains vectorized portions of the free and open source font 'Fira Sans'. See <https://carrois.com/typefaces/FiraSans/>. The animation is obtained by using SMIL to rotate the figures continuously and directly alter the filter parameters (x-offset values): <https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL> The filters are actually applied on groups surrounding the rotating figures. That way, the decomposition layers remain scattered horizontally while the figures rotate. 27.01.2018: Release Copyright (C) 2018 by Fabien Fellay This artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/>
Comment here...
SVG Flipbook (SVG Animation Assistant)
thebusiness
Make flipbook-style layer animations with Inkscape. SVG Flipbook is an open source app which runs next to your SVG editor and lets you animate your creation. Each layer in your SVG becomes one frame. This tool will cycle through the layers of your SVG allowing you to do basic flip-book style animation. Each layer in your SVG is one frame of the animation. https://svgflipbook.com/ --- Curated by Maren Hachmann on April 26 2021 2:33 PM --- Curated by Maren Hachmann on April 26 2021 2:34 PM
Comment here...
SVG Animation Assistant
thebusiness
SVG Flipbook (was SVG Animation Assistant) Make flipbook-style layer animations with Inkscape. SVG Flipbook is an open source app which runs next to your SVG editor and lets you animate your creation. Each layer in your SVG becomes one frame. This tool will cycle through the layers of your SVG allowing you to do basic flip-book style animation. Each layer in your SVG is one frame of the animation. https://svgflipbook.com/
Comment here...
Enjoy The Music
Agustín CG
Enjoy the music It is an illustration made in Inkscape and basically animated with SMIL using the xml editor.
Comment here...
Animation with inka and inkscape
Vera_
inka: https://imvenx.github.io/cssvgweb/#/ tutorial on how I did it: https://www.youtube.com/watch?v=w35GS6fKksE
Comment here...
inka llama animated walk
Vera_
llama animated with inka and inkscape https://imvenx.github.io/cssvgweb/#/
Comment here...
Animation Inkscape. BCW Analog Clock
My self.
Alien caverns
Chris McCormick
Made with Inkscape and animated with https://svgflipbook.com/
Comment here...
Animate Order
Mario Voigt
Create animated SVG preview file and show it in browser. Helps to quickly evaluate line order for cutting processes. Details: https://stadtfabrikanten.org/display/IFM/Animate+Order Please also check out Maren's extension: https://inkscape.org/~Moini/%E2%98%85line-animator-draw-by-invisible-hand
Comment here...
Inkscape Animation
PilTil.com
https://www.youtube.com/watch?v=ujBYE5DYFFU I made an animation with Inkscape and other Open source software for the promotion. I also added steps how other can make their Inkscape video.
Comment here...
smoking sign
Lazur
An animated svg filter was used for this effect. It's a bit resource-heavy when rendered as an svg, so captured it into a gif with sharex for those who can't render the svg. Edit: tested if the gif could be used as a thumbnail but then it's not animated so removed the svg entirely. It's available at openclipart. openclipar.org/detail/331168/stop-smoking-animated
Comment here...
Animated Windmills
Agustín CG
It is an illustration made in Inkscape and basically animated with SMIL using the xml editor.
Comment here...
Interactive Graphics
Agustín CG
Simple sample of 2 pages of an interactive story. It is an illustration made in Inkscape and basically animated with SMIL using the xml editor. Left click to advance to the next page.
Comment here...
Animated paper boat
Agustín CG
simple animation of a paper boat, created with Inkscape and animated using the SMIL language
Comment here...
Easing Map Smil
Agustín CG
Applied to the keySplines attribute of animateTransform in SMIL. Bézier curves can be used to add beautiful effects to transitions and animations.
Comment here...
Animated text on path
Agustín CG
The text on path option can be animated from the INKSCAPE XML Editor using SMIL (Synchronized Multimedia Integrated Language). This SVG is an example of animation, download it and view it in a popular web browser. If you want to know how to do it, I recommend watching the tutorial on Youtube: https://youtu.be/jxXhAa3e3LI
Comment here...
Animated music disc
Agustín CG
This SVG is a simple animation sample. This animation exercise applies translation, rotation, and scaling of objects, using the Synchronized Multimedia Integration Language (SMIL). Download and view in a popular web browser. If you want to know how it was done, I recommend watching the tutorials on youtube: https://youtu.be/UKBppD2xpSM
Comment here...
glass endless knot animated 02
Lazur
Six balls going endlessly inside a glass endless knot -depicted as an impossible object. With additional coating and reflection/highlight overlays.
Comment here...
glass endless knot animated 01
Lazur
Six balls going endlessly inside a glass endless knot -depicted as an impossible object.
Comment here...
deep dive treasure hunt in the desert (animated)
Lazur
An animated svg depicting a van cruising through an imaginary desert landscape. Then arrives a deep diver, an anchor and some deep sea treasure? Maybe he is diving from the BlueBird?
Comment here...
Animating smiley
Vera_
Animating smiley with inka https://imvenx.github.io/cssvgweb/#/
Comment here...
Webgx 300x600
visual_angle
Animated 300x600 banner ad template with Inkscape, SVG, CSS and JavaScript/GSAP. See animation in action at https://codepen.io/VisualAngle/full/bBRBvz/
Comment here...
Chromatic Aberration RGB-CMY Demo
Fabien Fellay
This is an animated SVG featuring the Chromatic Aberration Filters available here: <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-filters> The document also contains vectorized portions of the free and open source font 'Fira Sans'. See <https://carrois.com/typefaces/FiraSans/>. The Moon bitmap picture comes from Wikipedia and is licensed with CC-BY-SA 3.0 (Gregory H. Revera) <https://en.wikipedia.org/wiki/Moon#/media/File:FullMoon2010.jpg> The Sun bitmap picture comes from Wikipedia and is in the public domain (CC0). <https://en.wikipedia.org/wiki/Sun#/media/File:Sun_-_August_1,_2010.jpg> The animation is obtained by using SMIL to directly alter the filter parameters (x-offset values): <https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL> 26.01.2018: Release Copyright (C) 2018 by Fabien Fellay This artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/>
Comment here...
Chromatic Aberration RC-CR Demo
Fabien Fellay
This is an animated SVG featuring the Chromatic Aberration Filters available here: <https://inkscape.org/en/~fabien.fellay/%E2%98%85chromatic-aberration-filters> The filters have been adapted in order to obtain a red-cyan decomposition instead of the initial RGB or CMY: the horizontal offset values of the blue/yellow layer have been set to 0 user unit instead of 1. The document also contains vectorized portions of the free and open source font 'Fira Sans'. See <https://carrois.com/typefaces/FiraSans/>. The Moon bitmap picture comes from Wikipedia and is licensed with CC-BY-SA 3.0 (Gregory H. Revera) <https://en.wikipedia.org/wiki/Moon#/media/File:FullMoon2010.jpg> The Sun bitmap picture comes from Wikipedia and is in the public domain (CC0). <https://en.wikipedia.org/wiki/Sun#/media/File:Sun_-_August_1,_2010.jpg> The animation is obtained by using SMIL to directly alter the filter parameters (x-offset values): <https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL> 26.01.2018: Release Copyright (C) 2018 by Fabien Fellay This artwork is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). <https://creativecommons.org/licenses/by-sa/4.0/>
Comment here...
VID_0358: Slow Train Arriving
Norman Fellows
A clip lasting 27 seconds as part of a 2:00 minute movie introducing Edukit. The clip is comprised of 270 images to give a frame rate of 10 frames per second.
Comment here...
