SVG Vectorial Graphics: Illustrate and Animate with Code

Overview

“Masks and clipping paths allow us, just like in visual editing programs, to select a part of an image or graphic and show it, cutting the image to fit our needs. Let's see how they work.”

In this video lesson Javier Usobiaga Ferrer addresses the topic: Masks and clipping paths, 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

“Clipping masks are methods employed in visual editors such as Photoshop and Illustrator for design tasks. and they can also be used in SVG. Let's see how it works. to explain a clip path or trimming path To apply it to an element. first define it within the defs tag as shown below. we design it. in this case. we see a circle within the clip path. Lastly. we use the clipPath attribute along with its specific clipPath id on the desired element to trim it as needed. Here. i'll use a Clip Path to apply a star-shaped trimming path to the image. enhancing its visual What I do is load it using the...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: SVG Vectorial Graphics: Illustrate and Animate with Code

• Level: Beginner
• 98% positive reviews (272)
• 9191 students
• 7 units
• 32 lessons (2h 2m)
• 6 downloads

• Category

  Web & App Design

• Software

  Adobe Illustrator, Sketch

• Areas

  Animation, Interactive Design, Web Design, Web Development