<p>CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents — usually text — around those elements to wrap along the specified shapes. </p>
<p>Such a shaped flow of text looks good in editorial designs or designs that work with text-heavy contents to add some visual relief from the chunks of text. </p>
<p>Here’s an example of CSS Shape in use: </p>
<p>CodePen Embed Fallback </p>
<p>The shape-outside property specifies the shape of a float area using either one of the basic shape functions — circle(), ellipse(), polygon() or inset() — or an image, like this: </p>
<p>CodePen Embed Fallback </p>
<p>Inline content wraps along the right side of a left-floated element, and the left side of a right-floated element. </p>
<p>In this post, we’ll use the concept of CSS Shapes with emoji to create interesting text-wrapping effects. Images are rectangles. Many of the shapes we draw in CSS are also boxy or at least limited to standard shapes. Emoji, on the other hand, offers neat opportunities to break out of the box! </p>
<p>Here’s how we’ll do it: We’ll first create an image out of an emoji, and then float it and apply a CSS Shape to it. </p>
<p>I’ve already covered multiple ways to convert emojis to images in this post on creative background patterns. In that I said I wasn’t able to figure out how to use SVG to do the conversion, but I’ve figured it out now and will show you how in this post. You don’t need to have read that article for this one to make sense, but it’s there if you want to see it. </p>
<p>Let’s make an emoji image </p>
<p>The three steps we’re using to create an emoji image are: </p>
<p>Create an emoji-shaped cutout in SVGConvert the SVG code to a DataURL by URL encoding and prefixing it with data:image/svg+xmlUse the DataURL as the url() value of an element’s background-image. </p>
<p>Here’s the SVG code that creates the emoji shaped cutout: </p>
<p> 🦕 </p>
<p> 🦕 </p>
<p>What’s happening here is we’re providing a element with an emoji character for a . A clip path is an outline of a region to be kept visible when that clip path is applied to an element. In our code, that outline is the shape of the emoji character. </p>
<p>Then the emoji’s clip path is referenced by a element carrying the same emoji character, using its clip-path property, creating a cutout in the shape of the emoji. </p>
<p>Now, we convert the SVG code to a DataURL. You can URL encode it by hand or use online tools (like this one!) that can do it for you. </p>
<p>Here’s the resulted DataURL, used as the url() value for the background image of an .emoji element in CSS: </p>
<p>.emoji {<br />
background: url(“data:image/svg+xml, 🦕 🦕”);<br />
} </p>
<p>If we were to stop here and give the .emoji element dimensions, we’d see our character displayed as a background image: </p>
<p>CodePen Embed Fallback </p>
<p>Now let’s turn this into a CSS Shape </p>
<p>We can do this in two steps: </p>
<p>Float the element with the emoji backgroundUse the DataURL as the url() value for the element’s shape-outside property </p>
<p>.emoji {<br />
–image-url: url(“data:image/svg+xml, 🦕 🦕”);<br />
background: var(–image-url);<br />
float: left;<br />
height: 150px;<br />
shape-outside: var(–image-url);<br />
width: 150px;<br />
margin-left: -6px;<br />
} </p>
<p>We placed the DataURL in a custom property, –image-url, so we can easily refer it in both the background and the shape-outside properties without repeating that big ol’ string of encoded SVG multiple times. </p>
<p>Now, any inline content near the floated .emoji element will flow in the shape of the emoji. We can adjust things even further with margin or shape-margin to add space around the shape. </p>
<p>CodePen Embed Fallback </p>
<p>If you want a color-blocked emoji shape, you can do that by applying the clip path to a element in the SVG: </p>
<p> 🦕 </p>
<p>CodePen Embed Fallback </p>
<p>The same technique will work with letters! </p>
<p>CodePen Embed Fallback </p>
<p>Just note that Firefox doesn’t always render the emoji shape. We can work around that by updating the SVG code. </p>
<p> 🧗 </p>
<p>This creates a block-colored emoji shape by making the emoji transparent and giving it text-shadow with inline CSS. The containing the emoji and inline CSS style is then inserted into a element of SVG so the HTML code can be used inside the SVG namespace. The rest of the code in this technique is same as the last one. </p>
<p>CodePen Embed Fallback </p>
<p>Now we need to center the shape </p>
<p>Since CSS Shapes can only be applied to floated elements, the text flows either to the right or left of the element depending on which side it’s floated. To center the element and the shape, we’ll do the following: </p>
<p>Split the emoji in halfFloat the left-half of the emoji to the right, and the right-half to the leftPut both sides together! </p>
<p>One caveat to this strategy: if you’re using running sentences in the design, you’ll need to manually align the letters on both sides. </p>
<p>Here’s what we’re aiming to make: </p>
<p>CodePen Embed Fallback </p>
<p>First, we see the HTML for the left and right sides of the design. They are identical. </p>
<p> A C G T A</p>
