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...
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...
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...
inka llama animated walk
Vera_
llama animated with inka and inkscape https://imvenx.github.io/cssvgweb/#/
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 Inkscape. BCW Analog Clock
Alien caverns
Chris McCormick
Made with Inkscape and animated with https://svgflipbook.com/
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...
My self.
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...