Clipping in CSS and SVG — The clip-path Property and <clipPath> Element

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started.

Please note that the demos in this article may not work in your browser. You should check this compatibility table out for more information. You don't need to view the live demos to follow up with the article. Not all clipping features are implemented and some features may be buggy. The purpose of this article is to go over how clipping works in CSS and SVG, and serves as a reference for when these features are fully implemented. I'm also not including any vendor prefixes in the code samples here, but they are included in the live demos.

Clipping is a graphical operation that allows you to fully or partially hide portions of an element. The clipped element can be any container or graphics element. The portions of the element that are shown or hidden are determined by a clipping path.

A clipping path defines a region where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas. This region is known as the clipping region. Any parts of the element that lie outside of a clipping region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.

The clipped element can be any container or graphics element.

A clipping path is conceptually equivalent to a custom viewport for the element it applies to. It influences what parts of the element are rendered on the screen, but it does not affect the element’s inherent geometry—the element will affect the flow around it as it normally would, and every other element on the page will still see and treat the element as if it were still rectangular, even if it’s clipped to a non-rectangular shape. If you want to change the way the content around the element flows and have it respond to the defined shape of the clip path, you can use the CSS Shapes properties. If you want to learn more about how to do that, you can check the articles I wrote about this topic.

The clip-path property is part of the CSS Masking Module. The clipping operation has been a part of SVG since 2000, and has moved into the CSS Masking module so that it now allows clipping HTML elements as well as SVG elements.

The clip-path property is used to specify a clipping path that is to be applied to an element. Using clip-path, you can apply an SVG <clipPath> to an element by referencing that path in the property value. You can also define a clipping path using one of the basic shapes defined in the CSS Shapes module. These shapes can be created using shape functions. The shape functions available are polygon(), circle(), inset() (used to define inset rectangles), and ellipse().

Applying a clipping path to an element using the clip-path property is very simple and straightforward:

/* Referencing an SVG clipPath */
.element {
clip-path: url(#svgClipPathID);
}

/* Using a CSS basic shape function */
.element {
clip-path: polygon(...); /* or one of the other shape functions */
}

For example, if we were to define a polygonal clipping path using the polygon() function, and then apply it to an image, the code would look like the following:

img {
clip-path: polygon(626px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
}

The result of applying the above line of CSS to an image would look like the following:

View Live Demo

The basic shape functions allow us to create a limited number of shapes; the most complex of these shapes is a polygon. If you want to use a more complex shape that looks like more than just a group of connected straight lines, you can use the SVG <clipPath> element. As the name <clipPath> implies, you can clip to any arbitrary path. This means that you can use the <path> element to create any arbitrary path and use that as a clipping path.

In our second example, we’re going to define and use an SVG clipPath. The code for the clip path looks like the following:

<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"
/>

</clipPath>
</defs>
</svg>

And this is how the clipping path looks like; it is just a simple path with no fill and a black stroke.

We’ll be talking more about SVG <clipPath> in the next section. But for now, we’re just going to reference it and apply it to the image we have.

img {
clip-path: url(#svgPath);
}

And the result would look like the following:

View Live Demo

Indeed, the <clipPath> element can contain any number of basic shapes (<rect>, <circle>, etc.), <path> elements, or even <text> elements.

If you specify a piece of <text> inside a <clipPath>, that text will be used as a clipping path. Whatever’s under the text will be visible “through” it, and anything outside the text area will not be rendered.

Note here that you can clip anything to the text. This opens a door for a lot of possibilities and effects. You can use animated images (such as GIFs) or even videos, and then clip them to some text of your choice. The sky is the limit here.

The following is an example of a piece of text used as a clipping path.


	
		
			 Blossom 
		
	

```

The cool thing about SVG `` is that it can be displayed using a custom font, just like HTML text can. In this example I'm using the [Vollkorn font](http://www.google.com/fonts/specimen/Vollkorn) from Google Web Fonts. I've set the width of the text to be the same as the width of the image, using the `textLength` attribute, and positioned the text using the `x` and `y` coordinates. Note here that the `x` and `y` coordinates determine the position of the bottom left corner of the text (where the bottom stands for the baseline of the text).

The result of applying the above text clip path to the image looks like so:

View Live Demo

And as we mentioned, you can also use multiple basic shapes inside ``. We'll dig into `` and its contents in the next section, so, for now, we'll keep it simple. In this example I'm using multiple ``s, each with a different size and position.

    
        
            
            
            
            
            
            
        
    

```

The image will show through these circles combined, but will not be rendered outside them.

View Live Demo

As we mentioned at the beginning of this article, you can apply clip paths using the `clip-path` property to SVG elements too. In all of the above examples, the clipping paths were applied to an HTML ``. In the following example, a clipping path is applied to the root `` element. The same cherry blossoms image we used above is now part of the SVG, referenced using the `` element. The `` element in SVG is used to include a graphic that can be either an entire SVG or a raster image. If it's an SVG you're referencing in ``, the `width` and `height` attributes will be used to establish the viewport of that SVG. If you're referencing a raster image (which is what we're doing here), the image will be scaled to fit in the specified `width` and `height`. So I made sure the aspect ratio of the `width` and `height` attribute match the aspect ratio of the image I'm using, to prevent it from being distorted. When you create an `` document, you establish its viewport by specifying the width and height of the `` element. Anything drawn outside the limits of the viewport will be clipped out and will not be displayed. You can establish a new custom viewport of your own with the `` element.

    
    
        
            
            
            
            
            
            
            
            
        
    

```

Using `clip-path`, we're going to apply the `clipPath` to the ``:

```css 
svg {
    clip-path: url(#theSVGPath);
}
```

View Live Demo

More examples applying a clipping path to an SVG element in the `` section below. In addition to the clipping path itself, you can define a reference box in the `clip-path` property when the clipping path applied is a ``; that is, a clipping path created using one of the basic shape functions. The reference box is hence only specified for CSS shapes used as clip paths, not for SVG ``s. For an SVG ``, the reference box is the border box of an HTML element. So a reference box is specified for a `` clip path. If the element being clipped is an HTML element, the reference box can be one of the four basic box model boxes: `margin-box`, `border-box`, `padding-box`, or `content-box`. Each of these is self-explanatory. If the `` clip path is applied to an SVG element, the reference box can be set to one of three keyword values: - fill-box – uses the object bounding box as the reference. - stroke-box – uses the stroke bounding box as the reference. - view-box – uses the uses the nearest SVG viewport as the reference box if no `viewBox` is specified. If a `viewBox` is indeed specified, then the coordinate system is established by the origin and dimensions specified by the `viewBox`. If you set any of the CSS box model boxes as a reference box for an SVG element, the `fill-box` will be used. And if you use one of the SVG reference boxes on an HTML element, the `border-box` will be used. ```css .element { clip-path: polygon(...) padding-box; } ``` If *only* a reference box is specified in the `clip-path` property—that is, no basic shape is defined—the browser uses the edges of the specified box, including any corner shaping (e.g. defined by the `border-radius` property), as clipping path. For example, using the following snippet, the element will be clipped to the rounded corners specified by `border-radius`: ```css .el { clip-path: border-box; border-radius: 25%; } ```

Note that at the time of writing of this article, specifying a reference box in the `clip-path` property doesn't work in Webkit because it's not yet implemented.

It is important to know that any value other than the default `none` for the `clip-path` property results in the creation of a stacking context on the element the same way the `opacity` property does.
Any value other than the default `none` for the `clip-path` property results in the creation of a stacking context on the element.
Furthermore, according to the Masking specification, pointer events must not be dispatched on the clipped-out (non-visible) regions of a shape. This means that the element should not respond to pointer events outside the remaining visible area. A clipping path can also be animated. If the clipping path used is an SVG ``, it can be animated by including an animation inside it (See next section for details). If the cipping path is a basic shape created using a basic shape function, it can be animated using CSS animations and transitions. For details on how to animate a shape created using a shape function, check out the [Animating CSS Shapes with CSS Animations and Transitions](http://sarasoueidan.com/blog/animating-css-shapes) article I wrote a while back. In SVG, the `clipPath` element is used to define a clipping path to clip elements. If you don't want to use CSS to apply the clipping path to an element, you can do it in SVG using the `clip-path` presentation attribute.

Have you seen/read my "Styling and Animating Scalable Vector Graphics with CSS" slides? If not, you may want to have a look at them for more information about SVG presentation attributes and CSS properties used to style SVG elements. You can check them out here.


    
        
            
        
    
    
    
        
    

```



We mentioned earlier that an SVG `clipPath` can contain any number of basic shapes, arbitrary ``s, and/or `` elements. It can even contain more than that, and this is where it can get interesting.

The `` content can be descriptive (``, `<desc>`, `<metadata>`). It can also be a shape (`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`) or a `<text>`. A `<clipPath>` can also contain a `<use>` element or a `<script>`. Note that `<use>` in `<clipPath>` can only reference the simple SVG shapes mentioned above—it cannot be used to reference groups inside `<clipPath>`, for example; that simply won't work.

And last but not least, a `<clipPath>` can contain an <strong>animation</strong> using `<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>`, or `<set>`. This opens a door for a lot of creativity, as you can imagine.

To demonstrate, I'm just going to add a simple animation to the demo using multiple `<circle>`s as a clipping path. Every `<circle>` will get an animation. Because I want to keep it simple, I'm just gonna use the same animation on all of the circles. You can create fancier effects using different effects and playing with animation delays, of course. But, since this is a 101 article, I'm gonna stay on the simple side. The code with the animations look like so:

<pre class="brush:html">
<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40">
                        <animate
                            attributeName="r"
                            attributeType="XML"
                            from="0" to="250"
                            begin="0s" dur="3s"
                            fill="freeze"
                            repeatCount="indefinite"/>
                    </circle>
            <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576">
                <animate
                    attributeName="r"
                    attributeType="XML"
                    from="0" to="250"
                    begin="0s" dur="3s"
                    fill="freeze"
                    repeatCount="indefinite"/>
            </circle>
            <!-- ... -->
        </clipPath>
    </defs>
</svg>
```

The animation specified for each circle will animate the size of the circle—more specifically, its radius (`r`)—over the course of three seconds, from `0` to `250` pixels. I've also set the animation to repeat indefinitely.

Click on the following button to view the live demo. But before you do, note that there is a bug (see bug details [here](https://code.google.com/p/chromium/issues/detail?id=391604)), so the demo may not work for you if you're on Chrome or Safari. For now, I recommend using Firefox to see the working live demo, until the bug has been fixed.

<p><a href="../../demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath-animated/index.html" class="button">View Animated clipPath Demo Live</a></p>

Note that the content of a `<clipPath>` also cannot involve groups (`<g>`s). For example, if we were to add a group element to the demo that uses multiple circles as a clipping path, the demo will no longer work—the clipping path will no longer be applied to the image.

<pre class="brush:html">
<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath"> <!-- WILL NOT WORK -->
            <g> <!-- WILL NOT WORK -->
                <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576"/>
                <circle stroke="#000000" stroke-miterlimit="10" cx="426.576" cy="108.305" r="47.034"/>
                <!-- ... -->
            </g>
        </clipPath>
    </defs>
</svg>
```

<h4 class="deeplink" id="clippathunits">The <code>clipPathUnits</code> Attribute</h4>

The `<clipPath>` element can have several attributes, including `id`, `class`, `transform`s, and [presentation attributes](http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute) like `fill` and `stroke`, among [many others](http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#SVGStylingProperties). But the one attribute that stands out, and that is particularly useful, is the `clipPathUnits` attribute.

<blockquote class="pull-quote">
    The <code>clipPathUnits</code> attribute is used to specify a coordinate system for the contents of the <code><clipPath></code>.
</blockquote>

The `clipPathUnits` attribute is used to specify a coordinate system for the contents of the `<clipPath>`. It takes one of two values: `objectBoundingBox` or `userSpaceOnUse`. The default value is `userSpaceOnUse`.

<pre class="brush:html">
clipPathUnits = "userSpaceOnUse | objectBoundingBox"
```

<dl>
    <dt>userSpaceOnUse</dt>
    <dd>
        The contents of the <code>clipPath</code> represent values in the current <em><strong>user coordinate system</strong></em> in place at the time when the <code>clipPath</code> element is referenced (i.e., the user coordinate system for the element referencing the <code>clipPath</code> element via the <code>clip-path</code> property).
        <p>
            The current <strong>user coordinate system</strong> (a.k.a <em><strong>local coordinate system</strong></em>) is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed. The user coordinate system for an HTML element with an associated CSS box model is different from that of an SVG element with no such box model.
        </p>
        <p>
            For elements that have an associated CSS layout box, the current user coordinate system has its origin at the top left corner of a reference box and one unit equals one CSS pixel. The viewport for resolving percentage values is defined by the width and height of the reference box. I'm sure you're already familiar with this. So if you have a <code><clipPath></code> containing a <code><circle></code> whose center is positioned at <code>cx = "100"</code> and <code>cy = "100"</code>, the center will be positioned 100 pixels to the left and 100 pixels down inside the boundaries of the reference box.
        </p>
        <p>
            If the element is an SVG element and thus does not have an associated CSS layout box, the current user coordinate system has its origin at the top left corner of the element's <strong>nearest viewport</strong>. In most cases, the nearest viewport is the viewport established by the width and height of the closest <code><svg></code> ancestor. If you're not nesting <code><svg></code>s, it's simply the viewport you establish on the root <code><svg></code>.
        </p>
        <p>
            Note that the coordinate system on an SVG element can be modified using the <code>viewBox</code> attribute, among other attributes which may contribute to changing the coordinate system. However, that's outside the scope of this article. So in this article I'm going to work under the assumption that no <code>viewBox</code> is modified, and hence the browser will use the default coordinate system with the origin at the top left corner, and dimensions equal to the dimensions of the <code><svg></code>.
        </p>
    </dd>
    <dt>objectBoundingBox</dt>
    <dd>
        The coordinate system has its origin at the top left corner of the <strong><em>bounding box</em></strong> of the element to which the clipping path applies to and the same width and height of this bounding box. A bounding box is the object bounding box for all SVG elements (it contains only an element's geometric shape) and the border box for HTML elements with an associated box model.
        <p>
            This value is particularly useful for SVG elements because it allows you to apply the clip path to the boundaries of the element itself, not the coordinate system on use. To demonstrate, here is an image showing the result of applying the clip path to an image inside an SVG canvas using <code>userSpaceOnUse</code> versus <code>objectBoundingBox</code>. The grey border represents the border of the <code><svg></code> element where the viewport is set. For the image on the right, I've added a grey border around the clipped image just to show the boundaries of the bounding box.
        </p>
        <figure>
            <img src="../../assets/images/clippathunits.png" alt="">
            <figcaption>The result of applying the <code>clipPath</code> to an image inside the SVG canvas using <code>userSpaceOnUse</code> (left) and <code>objectBoundingBox</code> (right). </figcaption>
        </figure>
        <p>
            In the image on the left, the clipping path is positioned in the coordinate system established on the viewport of the SVG. When using <code>objectBoundingBox</code>, the bounding box of the image itself is used as the coordinate system of the clipping path.
        </p>
        <p>
            One important thing to note here is that <strong>when you use the <code>objectBoundingBox</code> value, the coordinates specified for the contents of the <code><clipPath></code> must be in the range [0, 1]</strong>—the coordinate system becomes a unit system, and the coordinates of the shapes inside a <code>clipPath</code> have to be fractions in that range.
        </p>
        <figure>
            <img src="../../assets/images/clippathunits-system.jpg" alt="">
            <figcaption>
                The coordinate system used for the <code>objectBoundingBox</code> value on the right, versus that used for the <code>userSpaceOnuse</code> on the left.
            </figcaption>
        </figure>
        <p>
            For example, if the clip path being applied to an element contains a circle positioned so that its center lies at the center of the clipped element:
        </p>
        <pre class="brush:html">
            <clipPath>
                <circle cx="350" cy="350" r="300" />
            </clipPath>
        ```
        <p>
            the circle position (and radius) would be expressed in fractions like so:
        </p>
        <pre class="brush:html">
            <clipPath clipPathUnits="objectBoundingBox">
                <circle cx=".5" cy=".5" r=".45" />
            </clipPath>
        ```
        <p>
            The fractions are like percentage values in this case.
        </p>
    </dd>
</dl>


<h4 class="deeplink" id="-svg-clippath-notes"><code><clipPath></code> Notes</h4>

`clipPath` elements are never rendered directly; their only usage is as something that can be referenced using the `clip-path` property. The `display` property does not apply to the `clipPath` element; thus, `clipPath` elements are not directly rendered even if the `display` property is set to a value other than `none`, and `clipPath` elements are available for referencing even when the `display` property on the `clipPath` element or any of its ancestors is set to `none`.

Remember what we said earlier about pointer events when an HTML element is clipped? The same standard behavior is defined in the SVG Clipping and Masking specification: By default, pointer-events must not be dispatched on the clipped (non-visible) regions of an SVG element. The spec then mentions that <q>later versions of SVG may define new properties to enable fine-grained control over the interactions between hit testing and clipping</q>.

Firefox implements the same non-standard behavior we mentioned before—areas outside the clipping regions do not respond to pointer events.

Even though Chrome implements the standard behavior for the `clip-path` property on HTML elements, when you apply a `<clipPath>` to an SVG element, the behavior is the same as the one implemented in Firefox—only the visible areas respond to pointer events. I'm not sure if this is a feature or a bug.

In the following example, an SVG `<clipPath>` is applied to an SVG `<image>`. The clip path is similar to the one we used before, where the image is clipped by a number of rectangles. The image becomes translucent when you hover over it.

```css 
image {
    clip-path: url(#svgPath);
}
image:hover {
    opacity: .5;
}
```
<a href="../../demos/css-svg-clipping/svg-img-clipped-pointer-events/index.html" class="button">Try The Demo Out Live</a>

Also, note that an empty clipping path will completely clip away the element that had the `clip-path` property applied.

<h3 class="deeplink" id="final-words">Final Words</h3>

Clipping is one of those graphical operations that allow us to create irregular shapes in an otherwise rectangular web page. Indeed, clipping is a perfect companion to CSS shapes. If you've read any of my [previous](http://alistapart.com/article/css-shapes-101) [articles](http://sarasoueidan.com/blog/css-shapes/) about CSS Shapes, then you already know that the `clip-path` property can be an indispensable companion to CSS Shapes in some use cases. And once CSS Shapes properties can [reference SVG paths](http://dev.w3.org/csswg/css-shapes-2/#referencing-svg-shapes) ([CSS Shapes Module Level 2](http://dev.w3.org/csswg/css-shapes-2/)), in addition to the basic CSS shapes, the combination of Shapes and Clipping will allow us to create visually compelling designs that break the norms of the rectangle.

I hope you found this article useful. Thank you for reading! -->

    </div>
</main>

<style>
    .bird-food .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: var(--space-3xl);
    }
</style>

<div class="page__bottom">
    <section class="slice bird-food" aria-label="Content subscriptions">
        <div class="content-container grid">
            <div><div class="newsletter">
    <svg class="newsletter__logo" aria-hidden="true" focusable="false" viewBox="0 0 200 200" width="100" height="100">
        <path fill="currentColor" d="M184.2,115.3l-0.4-0.8l-0.1-0.2l-0.1-0.1l-0.1-0.2l-0.6-0.9c-0.4-0.6-0.8-1.2-1.2-1.7c-0.8-1.2-1.7-2.3-2.6-3.4  c-0.1-0.1-0.5-0.1-0.9,0.1c0.2-0.6,0.4-1.3,0.4-1.9c0-1.4-0.6-2.7-1.4-3.8l-1.4-1.8l-6.4-8l-3.1-3.9c-0.4-0.6-0.9-1.3-1.5-2.1  c-0.6-0.8-1.4-1.8-2.7-2.6c-0.6-0.4-1.4-0.7-2.2-0.9c-0.8-0.2-1.7-0.2-2.1-0.1c-1,0-2,0.1-2.9,0.3c-1.9,0.3-3.6,0.6-5.3,1  c-1.7,0.4-3.3,0.8-4.9,1.1l-5,0.9c-1.8,0.3-3.3,1.1-4.3,2c-0.2-0.2-0.3-0.4-0.5-0.6c-0.8-0.8-1.4-1.3-1.9-1.8l-3.6-3.6l-7.3-7.2  c-9.8-9.5-19.6-19-29.4-28.5l-7.4-7.1l-1.8-1.7c-0.5-0.5-1.1-1.1-1.7-1.8l-1-1c-0.6-0.6-1.2-1.2-1.8-1.7c-1.2-1.1-2.6-1.9-3.8-2.2  c-0.6-0.2-1.2-0.2-1.8-0.1c-0.6,0.1-1.3,0.4-1.7,0.7c-0.9,0.7-1.5,1.6-1.8,3.1c-0.2,0.7-0.2,1.5-0.2,2.4v1.5l0,2.7l0,11l-0.1,63.5  c-8.9-1.2-17.8-2.4-26.7-3.5l-14.1-1.7l-3.5-0.4l-2.3-0.3c-1-0.1-2.1-0.2-3-0.2c-2,0-3.4,0.5-4.3,1.5c-0.2,0.3-0.5,0.6-0.6,1  c-0.1,0.4-0.1,0.7-0.1,1c0,0.6,0.2,1.2,0.6,2c0.7,1.4,2.4,3.1,3.8,4.6l1.4,1.4l1.3,1.3l5.2,4.9l10.2,9.9  c6.8,6.6,13.7,13.2,20.6,19.8l6.3,6l1.5,1.5c0.4,0.4,0.9,0.9,1.4,1.5c0.5,0.6,1.1,1.2,1.9,1.8c0.8,0.6,1.8,1.3,3.1,1.6  c1.2,0.4,2.7,0.2,3.3,0.1c0.8-0.1,1.5-0.2,2.3-0.3c1.5-0.2,3-0.5,4.5-0.7c2.9-0.6,5.8-1.2,8.6-1.8c2.8-0.6,5.6-1.1,8.5-1.6l8.6-1.6  l17.1-3.1c5.4-1,9.6-3.2,9.2-5c0.3,0.3,0.8,0.2,1.3-0.3c7.8-8,15.6-16.1,23.1-24.4c2.3-2.5,4.5-5,6.8-7.6c0.4,1,0.9,1.7,1.5,1.6  c3.2-0.4,6.6-0.6,10.2-1.2c0.7-0.1,1.5-0.3,2.2-0.5c0.6-0.2,1.1-0.3,1.7-0.5c0.6-0.3,1.3-0.5,1.8-0.8c1-0.7,1.8-1.6,2-2.8  C185.1,117.6,184.8,116.5,184.2,115.3z M68.8,158.1l-6.3-6c-6.9-6.6-13.8-13.1-20.8-19.6c-3.5-3.2-6.9-6.5-10.5-9.7l-5.3-4.7  l-2.5-2.3l-0.6-0.5c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.3,0-0.3c0.2-0.1,0.4-0.1,0.7-0.2l0.4,0l0.1,0c0.1,0,0,0,0.2,0l1,0.1  l3.6,0.2l14.2,0.9c9,0.5,18.1,1,27.1,1.5l0,34.8c0,2.6,0.2,5.1,0.4,7.2L68.8,158.1z M124,153.8l-17.1,3.1l-8.6,1.6  c-2.8,0.5-5.7,1-8.6,1.6c-2.9,0.6-5.7,1.2-8.5,1.8c-1.4,0.3-2.8,0.5-4.1,0.7c-0.6,0.1-1.3,0.2-1.9,0.2c0.7-2.6,1.1-6.4,1.1-10.7  l0.1-100l0-9.5l0-2.4l0-1.1l0,0c0,0,0,0,0,0l0,0c0,0,0,0,0,0l0.8,0.8c0.6,0.6,1.2,1.3,1.9,2l1.9,1.8l7.5,7c10,9.3,20,18.6,30,27.9  l7.5,6.9l3.8,3.5c0.7,0.6,1.4,1.2,1.8,1.6c0.4,0.4,0.6,0.6,0.6,1c0.6,2.8,0.2,6.2,0.2,9.8l0.2,10.2c0.3,13.6,0.7,27.2,1,40.8v0  c0,0.8,0.1,1.4,0.2,1.8C132.3,153.3,128.4,153,124,153.8z M154.8,127.1c-6.7,8.5-13.2,17.1-19.6,25.8c0-0.1,0-0.2,0-0.3v0  c0.4-13.6,0.7-27.2,1.1-40.8l0.2-10.2c0.1-2.8,0.6-5.8,0.3-9.2c1.1,0.3,2.5,0.4,3.9,0.1l5.1-0.9c1.8-0.3,3.5-0.7,5.1-1.1  c1.6-0.4,3.2-0.7,4.8-0.9c0.8-0.1,1.5-0.2,2.2-0.2c0.5,0,0.4,0,0.5,0c0,0,0.1,0,0.1,0.1l12.1,15.2l1.2,1.5l0,0l0,0  c0,0,0.1-0.1-0.1,0.1l-0.5,0.6l-0.6,0.8c-0.8,1-1.7,2-2.7,3.1c-0.9,1.1-1.9,2.2-2.8,3.3C161.8,118.3,158.3,122.7,154.8,127.1z   M178.9,116.3c0,0,0,0.1,0,0.1c-0.1,0.3-0.3,0.3-0.5,0.3c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0l-1.8,0.3c-1.9,0.3-3.8,0.5-5.9,0.7  c0.9-1,1.7-1.9,2.5-2.8c0.9-1,1.9-2.1,2.9-3.2l0.7-0.9l0.4-0.4l0.4-0.6c0.1-0.2,0.3-0.4,0.4-0.6c0.1,1.2,0.3,2.4,0.5,3.6  c0.1,0.7,0.3,1.4,0.4,2.1l0.2,1l0.1,0.3L178.9,116.3L178.9,116.3z"></path>
    </svg>

    <div class="newsletter__description">
        <h2 class="h4">The Bird’s-eye View on Design Engineering</h2>
        <p>Every 2–3 weeks, I send out an <strong>email newsletter</strong> with useful news, links, resources, tips, and latest updates on design engineering — from my own work as well as the work and articles created by smart people in the community.</p>
        <p>Birds of feather, flock together. Join the flock!</p>
    </div>

    <form class="newsletter__form" action="/successfully-subscribed-to-newsletter/" method="POST" data-netlify="true" name="newsletter" netlify-honeypot="bot-field" aria-label="Subscribe to the newsletter">
        <p hidden>
            <label>
                Don’t fill this out if you’re human: <input name="bot-field" />
            </label>
        </p>
        <label for="email">
            <span class="label__text">E-mail</span>
        </label>
        <div class="fields">
            <input type="email" id="email" name="email">
            <button class="btn" type="submit">Subscribe</button>
        </div>
    </form>
</div>
</div>
            <div><div class="rss-feeds">
    <svg class="rss-feeds__logo" aria-hidden="true" focusable="false" viewBox="0 0 100 100" width="100" height="100">
        <path fill="currentColor" d="M72.518,81.874c2.472,0.544,6.959,0.325,9.171-0.806c2.705-5.296-2.105-20.127-4.598-25.439  c-3.407-7.262-6.841-13.486-12.559-19.19c-4.278-4.269-12.649-10.59-18.219-13.026c-3.629-1.587-7.125-3.34-10.811-4.812  c-2.389-0.955-11.198-2.807-12.871-1.037c1.52,1.037,8.254,2.816,10.637,3.775c18.54,7.46,30.367,15.303,39.455,33.618  c2.232,4.498,7.213,18.255,5.64,22.785l-3.317,0.336c-2.051-3.21-1.255-15.801-18.327-33.825  c-5.188-5.478-8.782-6.881-14.656-11.045c-1.915-1.358-6.41-3.451-8.653-4.45c-3.635-1.617-6.845-1.743-10.175-2.928  c-1.562-3.393,0.228-6.205-2.821-7.056c-2.962,1.54-2.031,8.906,0.908,10.482c2.314,1.241,8.057,2.022,11.24,3.374  c13.792,5.864,24.121,15.295,31.614,27.853c1.738,2.912,3.78,6.604,4.836,9.78C70.097,73.532,70.491,79.618,72.518,81.874z"></path>
        <path fill="currentColor" d="M20.01,38.329c1.071,0.662,13.207,2.312,24.37,14.233c4.678,4.995,14.908,18.738,12.919,25.785l-4.203,0.964  c-3.225-2.399,0.16-7.842-11.491-19.437c-3.701-3.682-7.955-7.592-12.721-9.957c-2.425-1.203-4.272-1.163-6.052-2.011l-0.676-5.346  l-1.773-1.132c-2.412,1.193-1.832,4.147-1.535,6.429c0.854,6.566,6.427,1.474,16.714,11.508c2.561,2.498,6.939,6.871,8.946,9.7  c3.283,4.627,3.368,11.501,5.233,13.918c2.528,0.42,8.744,0.226,10.768-1.426c2.141-1.746,0.567-7.827,0.065-10.418  C58.359,59.681,32.385,30.341,20.01,38.329z"></path>
        <path fill="currentColor" d="M30.295,82.587c12.452-3.887,8.66-24.661-5.447-20.57c-2.456,0.712-5.402,1.403-6.334,4.249  C14.828,77.52,21.865,85.218,30.295,82.587z M21.432,70.194c1.605-8.076,14.805-4.763,11.982,3.919  C30.615,82.722,19.489,79.975,21.432,70.194z"></path>
    </svg>
    <!-- <img src="../../assets/images/illustrations/flower-envelope-2.svg" width="100" height="100" alt="An envelope with flowers coming out of it.">  -->
    <div class="rss-feeds__description">
        <h2 class="h4">Real. Simple. Syndication.</h2>
        <p>Get my latest content in your favorite RSS reader. <small>(<a href="https://aboutfeeds.com/">What is RSS?</a>)</small></p>
    </div>
    <ul role="list">
        <li><a href="/blog-feed.xml">Blog feed</a></li>
        <li><a href="/desk-feed.xml">Desk feed</a></li>
        <li><a href="/links-feed.xml">Links feed</a></li>
        <li><a href="/wall-feed.xml">Wall feed</a></li>
        <li><br></li>
        <li><a href="/feed.xml">All content</a></li>
    </ul>
    <p>
        <a class="twitter-follow-button" href="https://twitter.com/SaraSoueidan" data-size="large">Follow @SaraSoueidan</a>
    </p>
</div>
</div>
        </div>
    </section>
    <section class="slice">
        <div class="content-container">
            <nav class="footer-nav" aria-label="More on this site" id="more-navigation">
    <h2 class="h4">More on this site</h2>
    <ul role="list" id="footer-nav-list">
        
        <li>
            <a href="/about/" >About</a>
            <p>A little bit more about me.</p>
        </li>
        
        <li>
            <a href="/links/" >Links</a>
            <p>Articles I’ve been reading.</p>
        </li>
        
        <li>
            <a href="/about/#interviews" >Interviews</a>
            <p>Public interviews about me and my work.</p>
        </li>
        
        <li>
            <a href="/speaking/#podcasts" >Podcasts</a>
            <p>Podcast interviews about work, freelance career, and beyond.</p>
        </li>
        
        <li>
            <a href="/press-kit/" >Press Kit</a>
            <p>Biographies and photos for public use.</p>
        </li>
        
        <li>
            <a href="/endorsements/" >Endorsements</a>
            <p>Endorsements from people and clients I’ve worked with.</p>
        </li>
        
        <li>
            <a href="/desk/" >The Desk</a>
            <p>Uncategorized thoughts about everything from travel, to work, productivity, and life.</p>
        </li>
        
        <li>
            <a href="/wall/" >The Wall</a>
            <p>Short posts, photos, and anything that doesn't belong elsewhere.</p>
        </li>
        
        <!-- <br>
        <p>
            <a class="twitter-follow-button" href="https://twitter.com/SaraSoueidan" data-size="large">Follow @SaraSoueidan</a>
        </p> -->
    </ul>
</nav>

        </div>
    </section>
    <footer class="site-footer slice">
    <div class="content-container">
        <a href="#" id="back-to-top" aria-labelledby="back-up" class="back-to-top">
    <span id="back-up" hidden> Back to top </span>
    <svg class="c-icon" role="img" aria-label="Bird" width="60" height="60" viewBox="0 0 100 100">
        <path d="M34.555,9.603c3.387,0.334,3.535,3.578,5.195,5.436  c0.096,0.014,0.28,0.099,0.355,0.04c4.926-3.712,8.718-3.036,13.326,0.873c2.084,1.769,3.387,4.881,4.206,7.632  c2.281,7.664,2.383,15.653,2.594,23.579c0.162,6.068,0.031,12.145,0.031,18.479c3.062,0.563,6.021,1.009,8.924,1.687  c1.479,0.345,2.898,1.03,4.275,1.702c1.638,0.798,1.348,1.839,0.005,2.623c-1.049,0.611-2.238,0.979-3.399,1.471  c0.573,0.542,1.278,1.014,1.705,1.665c0.459,0.696,1.142,1.874,0.872,2.292c-0.53,0.83-1.614,1.714-2.534,1.794  c-1.446,0.128-2.952-0.39-4.433-0.636c0.053,0.753,0.325,1.746,0.123,2.629c-0.2,0.859-0.716,1.978-1.409,2.301  c-0.696,0.322-2.09,0.117-2.634-0.414c-1.009-0.982-2.028-2.281-2.319-3.607c-0.776-3.547-1.241-7.171-1.679-10.781  c-0.133-1.107-0.2-1.876-1.39-2.466c-1.805-0.892-3.438-2.127-5.438-3.405c0.176,3.427,0.341,6.635,0.48,9.359  c1.192,1.04,2.115,1.849,3.039,2.654c-0.769,0.254-1.54,0.508-2.389,0.787c0.446,0.534,1.041,1.247,1.814,2.176  c-0.512,0.304-1.318,0.909-1.408,0.816c-1.34-1.369-3.4-2.688-3.688-4.302c-0.659-3.696-0.806-7.579-0.459-11.323  c0.283-3.047-1.854-4.019-3.589-6.169c0,2.594-0.069,4.691,0.023,6.778c0.057,1.251,0.519,2.492,0.523,3.738  c0.003,1.345,0.601,2.78-1.289,3.843c-0.995,0.558-1.16,2.521-1.822,3.786c-0.299,0.576-0.801,1.233-1.366,1.449  c-1.238,0.47-2.173,0.262-1.492-1.494c-0.915-0.066-1.796-0.131-2.679-0.195c-0.123-0.227-0.248-0.451-0.371-0.678  c2.036-1.526,4.072-3.053,6.335-4.752c-0.245-4.145-0.491-8.753-0.824-13.354c-0.057-0.795-0.275-1.754-0.776-2.316  c-5.1-5.708-7.403-12.625-7.926-20.006c-0.235-3.299,0.616-6.941,1.938-10.01c1.222-2.84,0.704-5.078-0.188-7.616  C34.136,13.723,33.221,11.716,34.555,9.603z M57.245,64.862c0.157-0.152,0.314-0.304,0.475-0.453c0-1.466,0.054-2.934-0.011-4.393  c-0.405-9.554-0.84-19.107-1.257-28.66c-0.21-4.836-1.243-9.417-3.851-13.591c-2.383-3.818-7.125-4.776-10.175-1.494  c-2.148,2.311-4.006,5.14-5.172,8.062c-3.595,9.001-1.571,17.474,3.701,25.178c1.988,2.905,4.756,5.323,7.365,7.752  C51.177,59.923,54.259,62.338,57.245,64.862z M62.129,79.774c0.309-0.057,0.619-0.112,0.928-0.171  c-0.168-0.929-0.456-1.854-0.475-2.786c-0.016-0.921,0.234-1.85,0.371-2.772c1.054,0.32,2.186,0.491,3.144,0.992  c1.417,0.745,2.708,1.727,4.054,2.607c0.213-0.32,0.424-0.643,0.638-0.963c-1.497-1.041-3.013-2.058-4.479-3.139  c-0.533-0.395-0.949-0.952-1.419-1.436c0.678-0.256,1.337-0.651,2.033-0.736c1.668-0.206,3.352-0.265,5.03-0.385  c0.016-0.307,0.034-0.61,0.054-0.918c-3.707-0.79-7.414-1.579-11.742-2.503C60.925,71.881,61.525,75.827,62.129,79.774z" fill-rule="evenodd" clip-rule="evenodd"></path>
        <path d="M47.275,47.923c-2.925,1.396-4.688,0.656-5.155-2.386  c-0.315-2.047-0.08-4.185,0.032-6.276c0.016-0.302,0.73-0.568,1.123-0.849c0.443,0.622,1.209,1.217,1.268,1.873  c0.168,1.86,0.034,3.747,0.045,5.625c0.003,0.235,0.166,0.473,0.39,1.073c0.812-1.217,1.38-2.221,2.103-3.096  c0.414-0.496,1.081-0.779,1.634-1.158c0.336,0.614,0.859,1.198,0.966,1.853c0.2,1.232,0.088,2.514,0.243,3.757  c0.117,0.942,0.45,1.857,0.843,3.387c0.95-1.591,1.636-2.735,2.319-3.881c0.222-0.037,0.44-0.074,0.659-0.111  c0.205,0.941,0.811,2.027,0.528,2.791c-0.536,1.457-1.631,2.562-3.522,2.364C47.721,52.574,47.964,50.015,47.275,47.923z" fill-rule="evenodd" clip-rule="evenodd"></path>
        <circle cx="48.059" cy="22.034" r="1.75" fill-rule="evenodd" clip-rule="evenodd"></circle>
    </svg>
</a>

        <div class="copyright">
            <p>This Web site is built with <a href="https://www.11ty.dev">Eleventy</a> and hosted on <a href="https://netlify.com">Netlify</a>.</p>
            <p>© Sara Soueidan 2013–Today. <strong>All rights reserved.</strong></p>
        </div>
    </div>
</footer>

</div>





    <script src="/assets/js/lite-yt-embed.js"></script>
    <script>
        ! function(d, s, id) {
            var js,
                fjs = d.getElementsByTagName(s)[0];
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = "//platform.twitter.com/widgets.js";
                fjs
                    .parentNode
                    .insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>


</body>

</html>