For those interested and for myself in the future, this post contains the steps necessary to create – and animate – an SVG document using Figma and clipPaths!
Figma: A cross-platform online and offline vector graphics editor.
SVG: A markup language for layout and rendering of graphics. Widely used on the web.
clipPath: An invisible shape layer that will hide a separate part of the visible image.
Let’s keep it simple ;) I’m going to draw three circles, one on top of the other, and three small rectangles to the left. This drawing will allow us to explore three different styles of clip-path animation. Create the layout shown below with Figma. The red and green rectangles are not touching their respective circles, but the blue rectangle is partially overlapping the blue circle.
Give the Figma layers clear names, these names will be preserved and used as identifiers for the shapes in our SVG markup.
Note, placing a pure white rectangle behind our Figma drawing will help us export the drawing to the correct size. (We will later delete the white rectangle from the SVG document effectively making the background of our SVG transparent). When exporting check the
'Include "id" Attribute' option to ensure our shapes are easily identifiable in code.
Upon exporting and opening the SVG, it looks like this:
Open the SVG document with an editor and a browser to view both the code and rendered drawing. Copy the markup above into a .svg file if your drawing didn’t work-out, and you’ll have everything you need to follow along.
Here I modify the SVG markup to make certain shapes into clipPaths. Here’s a summary of the changes:
defssection was added to define the three circles as clipPaths.
gtags, and the clip-path for the red and green rectangles was added onto the
gtag rather than the rect directly.
Adding the clip-path to an enclosing
g tag allows the clip-path to remain static while the rect is animated. Unlike the clip-path for the blue rect which will animate along with the shape as will be shown below.
If you open the above SVG code in a browser. You’ll see that the three circles are gone because they are now invisible clip-paths. Also the red and green rects are gone because they are currently outside their clip-path regions. Only when parts of the red and green rects intersect with their respective clip-path regions will they show up. The blue rect is partially showing as it is partially intersecting with its clip-path (shown below).
Add the following line of code as the first line in the SVG file and create a style sheet called
svg-style.css in the same directory as your SVG drawing.
Learn more about CSS Animations over at CSS tricks. We’re going to keep things fairly simple here. Add the following code in
The animation code above has the following effects on the drawing.
Below is the final animation. The red and green rects are only rendered when they intersect with their clipPaths, and the blue rect is permanently cut by its clipPath regardless of its dynamic movement.
So we’ve learnt how to draw an SVG graphic in Figma and animate the graphic with CSS3. Keep in mind the differing behavior of clipPaths when placed directly on the element vs. on an enclosing
g tag when you’re trying to create a specific effect, and feel free to reach out with any questions @StrawStackRH!