It is more general and agnostic of the concrete SVG animation technology used.Īll CSS Animation standards focus on animation of CSS properties only.
Since the CSS standard was modularized, the available bits and pieces live in different specification modules. With the last changes in CSS Specifications, CSS got more powerful in terms of animating elements on a web page. SMIL was originally intended by W3C to become the main animation method for SVG, but according to SVG working group’s github issues this is a point of debate. Unfortunately, there is more than one canonical way to do it. In former times, people would not have used SVG for that purpose, but rather some plugin-based technology like the proprietary Adobe Flash.Īs of 2020, it is possible to create vector animations for the web using web native technology. In order to achieve our goal of animating the logo directly, we need a way to animate the SVG vector art.
As our animation description is algorithmic as well, the loading animation can be easily reproduced when the details of the logo are changed. This time we will not compromise on exactness. Our animation will be optimised for use on the web by using native web technology. We will create a loading animation similar to the first metamorphant loading animation created in a sloppy, hackish way with Synfig. We will not change its geometry any more in this article.
#106 SYNFIG STUDIO SERIES#
In part 1 and part 2 of this series we refactored the metamorphant logo to a simplified SVG version based on algorithmic construction rules. The goal: A vectorized loading animation for the web
#106 SYNFIG STUDIO CODE#
You can find the final code example in the algorithmic-metamorphant-logo github repo tag third-blog-article. I start with the SVG from part 1 and part 2 of our algorithmic metamorphant article series and create a vectorised loading animation. This article is a tutorial in creating animations with SVG + SMIL. The goal: A vectorized loading animation for the web.
0 kommentar(er)
