8 Little Videos About the Firefox Shape Path Editor
If you ask any Frontend developer - what is the one tool, except the browser and your editor/IDE, that you use the most? My guess is most would say the Dev Tools. The Dev Tools is the equivalent of the handyman’s toolbox. It helps developers to smoke out bugs. It’s useful for testing out different UI & UX. You can use it to elaborate with copy. It can show you what your page looks like in print layout. It’s great for tweaking animations. You can use it to trim performance and track your page’s memory footprint. And many many more things besides than the ones mentioned above.
The Dev Tools is ever evolving. New features show up every year. Browser vendors compete to create the best developer experience out there. Last year (2018) Mozilla released the shape path editor in their Dev Tools. The editor is a nifty tool to further help developers. With it, one can create clipping paths and shape-outside effects. Since I am very much interested in what you can do with clipping paths, I decided to dig a little deeper. I wanted, for my own sake, to explore the possibilities. In this post, I’ll share some of my findings in text and with videos.
The shape path editor was first released in Firefox version 62. Refer to MDN Edit Shape paths in CSS for more detailed information on how it works. Let’s dive in!
1. Clipping animated text
One of the best things I found about the editor is that it works while animations are running. With the editor you can, with animations in the background, change clipping of your DOM nodes. This even works while the target node itself is moving. In the video below I use it to cut out moving text under a heart-shaped div. Feedback is almost instant. As always, being able to have a direct feedback loop is beneficial. This is especially the case when working with animations. For animations, it’s quite notable how much it speeds up the development process. You can much quicker iterate and fine-tune.
2. Drawing shape-outside paths
This is one of the more of obvious use-cases of the editor. As the name implies creating shape-outside paths is its main purpose. The major takeaway is how well the editor works to do so. It is very handy to be able to draw and visually tweak paths. It’s is, of course, possible to do the same with code. Yet, some tasks are much better suited to do with graphical editors. This is one of them. It feels almost effortless to push floating text and to trim distances. In seconds one can do what would take minutes to iterate and do with code.
3. Creating a skew logo appear effect
A tilted appear effect on text is something that I’ve been looking in to create for quite a while. I saw the effect a couple of years ago and it intrigued me. It’s an effect where “normal” horizontal text diagonally appears or disappears. As with many things on the web, there are several ways to create this effect. Using transform: skew and translation of a covering div could, for instance, be one way. However, with clipping paths, it is now dead simple. Below is how I created the effect in under 2 min. Using several clip-path rules on the same element is also a quite neat trick. It allows us, in the Dev Tools, to toggle between different shape editors on the same node. We can now, with different editors, quickly overview the animation. Toggling back and forth creates a way to edit the animation’s start- and end-states. Once you’re happy with the states, you simply copy the values into the animation’s keyframes.
4. Cutting out an image
This is also one of the more obvious use-cases of the editor. Creating magazine style floating text around images makes content stand out. It is what the majority uses shape-outside for. After posting the video on Twitter, Facundo Corradini informed me that it is possible to insert new nodes in the editor. This you do by clicking on the connecting lines.
5. Highlighting parts of an image
Duplicating images together with clipping is an easy way to create interesting effects. In the below video I use the same image twice stacked on top of each other. Both of them have absolute positioning. The lower image comes with a slight opacity, blending into its black background. This gives us a dimmed version of the original image. Cutting the image on top then creates the illusion of a highlight. With the editor, it’s simple to move and resize this highlight.
6. Morphing with clip-paths
Morphing is an effect that has interested me for years. So naturally, I had to explore if one could use clipping paths to create morphing effects. As it turns out, it works quite well to do so. We, of course, don’t have the same degree of freedom as we do with SVG. SVG has a richer feature-set. But, for simple shapes, this approach works. The natural question here is when will Mozilla extend the editor to work with SVG paths as well?
7. Intersecting clip-paths
Intersecting clip-paths is an interesting approach. By intersecting I mean the case where you cut an element twice or more. The trick is to add one clip-path rule to a parent node followed by another rule on one of its children. This has, in essence, nothing to the editor. You can, of course, do this without the editor. But again, the editor gives us an easy way to shape and overview the separate paths. Another feature request would be to allow showing multiple editors at the same time. It would be practical to be able to highlight and overview the different clipping paths. This is especially the case when working with intersecting clipping paths. For these, it would be valuable to visualize how they relate to each other. Not only showing the clipping of each node.
8 Intersecting clipping paths part II
The Rainbow and Shark Teeth Inputs is a Codepen demo where I use the intersecting technique. This is a more elaborative example as it combines both intersection and animation. The video below shows how to use clipping paths to create a rainbow effect. Several cut ellipse sized divs together create a rainbow. Animating these nodes with a slight delay causes them to be spread out. Setting overflow hidden on containers is also quite handy. It’s an easy way to create rectangular clipping paths without setting the clip-path rule.
Conclusions
The shape path editor is a great addition to the Dev Tools. It reduces the time and effort needed to create shape outside or clipping paths. Another great thing is the visualization of paths. It’s one of the better, less obvious, benefits of the Dev Tools as a whole. The ability to x-ray the patient (the code). With the developer tools we can see beyond what’s in the browser’s main window. This gives is the ability to better and quicker validate our mental models. Which, in turn, will speed up our development cycles.
I often find that there’s a sweet spot working with code together with editors. I jump back and forth. Sometimes I’m in the code sometimes in the editor. It’s the best of both worlds.
Thanks for reading, have a good time shaping your paths!
