SVG Vectorial Graphics: Illustrate and Animate with Code
Mutation (morphing) in SVG
A course by Javier Usobiaga Ferrer , Web designer
About the video: Mutation (morphing) in SVG
Overview
“The possibility that SVG elements mutate or transform into other elements, such as from a triangle to a square, is one of the most attractive points of this language, since in normal CSS animation they can not be performed. Let's see how to apply it.”
In this video lesson Javier Usobiaga Ferrer addresses the topic: Mutation (morphing) in SVG, which is part of the Domestika online course: SVG Vectorial Graphics: Illustrate and Animate with Code. Learn to create vector illustrations for your website, from basic lines to interactive animations.
Partial transcription of the video
“Morphing is the possibility of that an object or element is converted or changed from form to a different one. Something that, although it seems a lie, is very difficult to do with CCS. Let's see how it works. Here we can see some examples of icons with morphing that is, they change their shape, their stroke. Even that they go from 3 points to 4. What are they made then in this case with snap svg. Not all the elements that we are seeing here are necessarily doing a morphing. Some simply move or make some type of transformation of some of its elements. However, let's focus in this case on th...”
This transcript is automatically generated, so it may contain mistakes.
Course summary for: SVG Vectorial Graphics: Illustrate and Animate with Code
-
Category
Web & App Design -
Software
Adobe Illustrator, Sketch -
Areas
Animation, Interactive Design, Web Design, Web Development

Javier Usobiaga Ferrer
A course by Javier Usobiaga Ferrer
Javier Usobiaga is a Web Designer for 10 years and co-founder with Marta Armada Swwweet studio, specialized in designing responsive webs from the initial conception to the front-end development.
He also enjoys a lot in his facet as professor of Web Design in renowned workshops and schools like Elisava, IDEP.
Usobiaga understands the web as a whole, not only how beautiful it can be on the computer screen, but its usability in different devices and circumstances.
In his words "I think that as important as the aesthetic is how fast it charges or how well it responds, and I think that in our industry we often forget about that."
- 98% positive reviews (271)
- 9,106 students
- 32 lessons (2h 2m)
- 28 additional resources (6 files)
- Online and at your own pace
- Available on the app
- Audio: Spanish
- Spanish · English · Portuguese
- Level: Beginner
- Unlimited access forever