{"id":5824,"date":"2025-05-12T09:51:36","date_gmt":"2025-05-12T14:51:36","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5824"},"modified":"2025-06-04T06:05:01","modified_gmt":"2025-06-04T11:05:01","slug":"creating-flower-shapes-using-clip-path-shape","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/creating-flower-shapes-using-clip-path-shape\/","title":{"rendered":"Creating Flower Shapes using clip-path: shape()"},"content":{"rendered":"\n<p>In&nbsp;<a href=\"https:\/\/frontendmasters.com\/blog\/creating-flower-shapes-using-css-mask-trigonometric-functions\/\">a previous article<\/a>, we used modern CSS features such as <code>mask<\/code>, trigonometric functions, and CSS variables to create flower-like shapes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"883\" height=\"354\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/8hogoSIf.png?resize=883%2C354&#038;ssl=1\" alt=\"\" class=\"wp-image-5827\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/8hogoSIf.png?w=883&amp;ssl=1 883w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/8hogoSIf.png?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/8hogoSIf.png?resize=768%2C308&amp;ssl=1 768w\" sizes=\"auto, (max-width: 883px) 100vw, 883px\" \/><\/figure>\n\n\n\n<p>The HTML code was a single element, which means we can apply the CSS to image elements and get cool frames like the demo below:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYvPEeV\" src=\"\/\/codepen.io\/anon\/embed\/LYvPEeV?height=450&amp;theme-id=47434&amp;slug-hash=LYvPEeV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYvPEeV\" title=\"CodePen Embed LYvPEeV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In this article, we are redoing the same shapes using the new <code>shape()<\/code> function, which I think will become my favorite CSS feature.<\/p>\n\n\n\n<p class=\"learn-more\">At the time of writing, only Chrome, Edge, and Safari have the full support of the features we will be using.<\/p>\n\n\n<div class=\"box article-series\">\n  <header>\n    <h3 class=\"article-series-header\">Article Series<\/h3>\n  <\/header>\n  <div class=\"box-content\">\n            <ol>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/creating-flower-shapes-using-clip-path-shape\/\">Creating Flower Shapes using clip-path: shape()<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/creating-blob-shapes-using-clip-path-shape\/\">Creating Blob Shapes using clip-path: shape()<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-shape\">What is shape()?<\/h2>\n\n\n\n<p>You are probably familiar with&nbsp;<code>clip-path: polygon()<\/code>, right? A function that allows you to specify different points, draw straight lines between them and create various CSS shapes (I invite you to check&nbsp;<a href=\"https:\/\/css-shape.com\/\">my online collection of CSS shapes<\/a>&nbsp;to see some of them). I said \u201cstraight lines\u201d because when it comes to curves,&nbsp;<code>clip-path<\/code>&nbsp;is very limited. We have&nbsp;<code>circle()<\/code>&nbsp;and&nbsp;<code>ellipse()<\/code>, but we cannot achieve complex shapes with them.<\/p>\n\n\n\n<p><code>shape()<\/code>&nbsp;is the new value that overcomes such limitation. In addition to straight lines, it allows us to draw curves. But If you check the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/basic-shape\/shape\">MDN page<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/drafts.csswg.org\/css-shapes-2\/#shape-function\">the specification<\/a>, you can see that the syntax is a bit complex and not easy to grasp. It\u2019s very similar to SVG path, which is good as it gives us a lot of options and flexibility, but it requires a lot of practice to get used to it.<\/p>\n\n\n\n<p>I will not write a boring tutorial explaining the syntax and all the possible values, but rather focus on one command per article. In this article, we will study the&nbsp;<code>arc<\/code>&nbsp;command, and the next article will be about the&nbsp;<code>curve<\/code>&nbsp;command. And, of course, we are going to draw cool shapes. Otherwise it\u2019s no fun!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-arc-command\">The <code>arc<\/code> Command<\/h2>\n\n\n\n<p>This command allows you to draw an elliptic arc between two points but I will only consider the particular case of a circle which is easier and the one you will need the most. Let\u2019s start with some geometry to understand how it works.<\/p>\n\n\n\n<p>If you have two points (A and B) and a radius, there are exactly two circles with the given radius that intersect with the points. The intersection of both circles gives us 4 possible arcs between A and B that we can identify with a size (small or large) and a direction (clockwise or counter-clockwise)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"379\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/cxmPje61.png?resize=869%2C379&#038;ssl=1\" alt=\"\" class=\"wp-image-5828\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/cxmPje61.png?w=869&amp;ssl=1 869w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/cxmPje61.png?resize=300%2C131&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/cxmPje61.png?resize=768%2C335&amp;ssl=1 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<p>The code will look like the below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">clip-path<\/span>: <span class=\"hljs-selector-tag\">shape<\/span>(<span class=\"hljs-selector-tag\">from<\/span> <span class=\"hljs-selector-tag\">Xa<\/span> <span class=\"hljs-selector-tag\">Ya<\/span>, <span class=\"hljs-selector-tag\">arc<\/span> <span class=\"hljs-selector-tag\">to<\/span> <span class=\"hljs-selector-tag\">Xb<\/span> <span class=\"hljs-selector-tag\">Yb<\/span> <span class=\"hljs-selector-tag\">of<\/span> <span class=\"hljs-selector-tag\">R<\/span> <span class=\"hljs-selector-attr\">&#91;large or small]<\/span> <span class=\"hljs-selector-attr\">&#91;cw or ccw]<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The first command of a shape is always a&nbsp;<code>from<\/code>&nbsp;to give the starting point, and then we use the&nbsp;<code>arc<\/code>&nbsp;to define the ending point, the radius, the size, and the direction.<\/p>\n\n\n\n<p>Here is a demo to illustrate the different values:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gbbKPPP\/391f4bc771a5a7869deeb0751bfaf699\" src=\"\/\/codepen.io\/anon\/embed\/gbbKPPP\/391f4bc771a5a7869deeb0751bfaf699?height=450&amp;theme-id=47434&amp;slug-hash=gbbKPPP\/391f4bc771a5a7869deeb0751bfaf699&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gbbKPPP\/391f4bc771a5a7869deeb0751bfaf699\" title=\"CodePen Embed gbbKPPP\/391f4bc771a5a7869deeb0751bfaf699\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The points and the radii are the same. I am only changing the size and direction to choose one of the four possibilities. It should be noted that the size and direction aren\u2019t mandatory. The defaults are&nbsp;<code>small<\/code>&nbsp;and&nbsp;<code>ccw<\/code>.<\/p>\n\n\n\n<p>That\u2019s all: we have what we need to draw flower shapes!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-the-flower-shape\">Creating The Flower Shape<\/h2>\n\n\n\n<p>I will start with a figure from the previous article.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"775\" height=\"338\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/fRZEXPDg.png?resize=775%2C338&#038;ssl=1\" alt=\"\" class=\"wp-image-5829\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/fRZEXPDg.png?w=775&amp;ssl=1 775w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/fRZEXPDg.png?resize=300%2C131&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/fRZEXPDg.png?resize=768%2C335&amp;ssl=1 768w\" sizes=\"auto, (max-width: 775px) 100vw, 775px\" \/><\/figure>\n\n\n\n<p>Using the mask method, we had to draw a big circle at the center and small circles placed around it. Using&nbsp;<code>shape()<\/code>, we need to draw the arcs of the small circles. The starting and ending points of each arc are placed where the circles touch each other.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"294\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/GI44EdNN.png?resize=491%2C294&#038;ssl=1\" alt=\"\" class=\"wp-image-5830\" style=\"width:310px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/GI44EdNN.png?w=491&amp;ssl=1 491w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/GI44EdNN.png?resize=300%2C180&amp;ssl=1 300w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/figure>\n\n\n\n<p>The code will look as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.flower<\/span> { \n  <span class=\"hljs-attribute\">clip-path<\/span>: <span class=\"hljs-built_in\">shape<\/span>(from X0 Y0, \n     arc to X1 Y1 of R,\n     arc to X2 Y2 of R,\n     arc to X3 Y3 of R,\n     arc to X4 Y4 of R,\n     ...\n     arc to Xn Yn of R\n  )\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And like I did with the mask method, I will rely on Sass to create a loop.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"SCSS\" data-shcb-language-slug=\"scss\"><span><code class=\"hljs language-scss\"><span class=\"hljs-variable\">$n<\/span>: <span class=\"hljs-number\">10<\/span>;\n\n<span class=\"hljs-selector-class\">.flower<\/span> {\n  <span class=\"hljs-variable\">$m<\/span>: ();\n  <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,from X0 Y0,comma);\n  <span class=\"hljs-keyword\">@for<\/span> <span class=\"hljs-variable\">$i<\/span> from <span class=\"hljs-number\">1<\/span> through <span class=\"hljs-variable\">$n<\/span> {\n    <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,arc to Xi Yi of R,comma);\n  } \n  <span class=\"hljs-attribute\">clip-path<\/span>: shape(#{<span class=\"hljs-variable\">$m<\/span>});\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SCSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">scss<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now we need to identify the radius of the small circles (R) and the position of the different points (Xi, Yi). I already did the calculation of the radius in the previous article, so I will reuse the same value:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"SCSS\" data-shcb-language-slug=\"scss\"><span><code class=\"hljs language-scss\">R = 50%\/(1 + 1\/math<span class=\"hljs-selector-class\">.sin<\/span>(180deg\/<span class=\"hljs-variable\">$n<\/span>))<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SCSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">scss<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>For the points, they are placed around the same circle so their coordinate can be written like below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"SCSS\" data-shcb-language-slug=\"scss\"><span><code class=\"hljs language-scss\">Xi = 50% + D*math<span class=\"hljs-selector-class\">.cos<\/span>(<span class=\"hljs-variable\">$i<\/span>*360deg\/<span class=\"hljs-variable\">$n<\/span>)\nYi = 50% + D*math<span class=\"hljs-selector-class\">.sin<\/span>(<span class=\"hljs-variable\">$i<\/span>*360deg\/<span class=\"hljs-variable\">$n<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SCSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">scss<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here is a figure to illustrate the distance D and the radius R:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"289\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/MeAjhk0c.png?resize=438%2C289&#038;ssl=1\" alt=\"\" class=\"wp-image-5831\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/MeAjhk0c.png?w=438&amp;ssl=1 438w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/MeAjhk0c.png?resize=300%2C198&amp;ssl=1 300w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/figure>\n\n\n\n<p>I know you don\u2019t want a boring geometry course so here is the value of D.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"SCSS\" data-shcb-language-slug=\"scss\"><span><code class=\"hljs language-scss\">D = 50%\/(math<span class=\"hljs-selector-class\">.tan<\/span>(180deg\/<span class=\"hljs-variable\">$n<\/span>) + 1\/math<span class=\"hljs-selector-class\">.cos<\/span>(180deg\/<span class=\"hljs-variable\">$n<\/span>))<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SCSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">scss<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And the final code will be:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"SCSS\" data-shcb-language-slug=\"scss\"><span><code class=\"hljs language-scss\"><span class=\"hljs-variable\">$n<\/span>: <span class=\"hljs-number\">10<\/span>;\n\n<span class=\"hljs-selector-class\">.flower<\/span> {\n  <span class=\"hljs-variable\">$m<\/span>: ();\n  <span class=\"hljs-variable\">$r<\/span>: <span class=\"hljs-number\">50%<\/span>\/(<span class=\"hljs-number\">1<\/span> + <span class=\"hljs-number\">1<\/span>\/math.sin(<span class=\"hljs-number\">180deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>));\n  <span class=\"hljs-variable\">$d<\/span>: <span class=\"hljs-number\">50%<\/span>\/(math.tan(<span class=\"hljs-number\">180deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>) + <span class=\"hljs-number\">1<\/span>\/math.cos(<span class=\"hljs-number\">180deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>));\n  <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,from \n    <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.cos(<span class=\"hljs-number\">0<\/span>) \n    <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.sin(<span class=\"hljs-number\">0<\/span>),comma);\n  <span class=\"hljs-keyword\">@for<\/span> <span class=\"hljs-variable\">$i<\/span> from <span class=\"hljs-number\">1<\/span> through <span class=\"hljs-variable\">$n<\/span> {\n    <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,arc to \n      <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.cos(<span class=\"hljs-variable\">$i<\/span>*<span class=\"hljs-number\">360deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>)\n      <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.sin(<span class=\"hljs-variable\">$i<\/span>*<span class=\"hljs-number\">360deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>)\n      of <span class=\"hljs-variable\">$r<\/span>,comma);\n  } \n  <span class=\"hljs-attribute\">clip-path<\/span>: shape(#{<span class=\"hljs-variable\">$m<\/span>});  \n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SCSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">scss<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gbbKWZj\/e304716b943a40adf65cf62cba19501e\" src=\"\/\/codepen.io\/anon\/embed\/gbbKWZj\/e304716b943a40adf65cf62cba19501e?height=450&amp;theme-id=47434&amp;slug-hash=gbbKWZj\/e304716b943a40adf65cf62cba19501e&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gbbKWZj\/e304716b943a40adf65cf62cba19501e\" title=\"CodePen Embed gbbKWZj\/e304716b943a40adf65cf62cba19501e\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><em>Wait, we get the inverted shape instead? Why is that?<\/em><\/p>\n\n\n\n<p>We didn\u2019t define the size and the direction of the arcs so by default the browser will use&nbsp;<code>small<\/code>&nbsp;and&nbsp;<code>ccw<\/code>. This gives us the inverted version of the flower. If you try the 4 different combinations (including the default one) you will get the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"926\" height=\"344\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/F6iWJIUP.png?resize=926%2C344&#038;ssl=1\" alt=\"\" class=\"wp-image-5832\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/F6iWJIUP.png?w=926&amp;ssl=1 926w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/F6iWJIUP.png?resize=300%2C111&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/F6iWJIUP.png?resize=768%2C285&amp;ssl=1 768w\" sizes=\"auto, (max-width: 926px) 100vw, 926px\" \/><\/figure>\n\n\n\n<p><code>small ccw<\/code>&nbsp;and&nbsp;<code>large cw<\/code>&nbsp;give us the shape we are looking for. The&nbsp;<code>small cw<\/code>&nbsp;is an interesting variation, and the&nbsp;<code>large ccw<\/code>&nbsp;is a funny one. We can consider a CSS variable to easily control which shape we want to get.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEErZEr\/8a5dd546754a8e8264c6ca41e028dc7a\" src=\"\/\/codepen.io\/anon\/embed\/vEErZEr\/8a5dd546754a8e8264c6ca41e028dc7a?height=450&amp;theme-id=47434&amp;slug-hash=vEErZEr\/8a5dd546754a8e8264c6ca41e028dc7a&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEErZEr\/8a5dd546754a8e8264c6ca41e028dc7a\" title=\"CodePen Embed vEErZEr\/8a5dd546754a8e8264c6ca41e028dc7a\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"combining-both-shapes\">Combining Both Shapes<\/h2>\n\n\n\n<p>Now, what about the shape below?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"399\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/0cXX5vtA.png?resize=648%2C399&#038;ssl=1\" alt=\"\" class=\"wp-image-5833\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/0cXX5vtA.png?w=648&amp;ssl=1 648w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/0cXX5vtA.png?resize=300%2C185&amp;ssl=1 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p>The idea is to use the same code and alternate between two arc configurations.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"SCSS\" data-shcb-language-slug=\"scss\"><span><code class=\"hljs language-scss\"><span class=\"hljs-variable\">$n<\/span>: <span class=\"hljs-number\">10<\/span>;\n\n<span class=\"hljs-selector-class\">.flower<\/span> {\n  <span class=\"hljs-variable\">$m<\/span>: ();\n  <span class=\"hljs-variable\">$r<\/span>: <span class=\"hljs-number\">50%<\/span>\/(<span class=\"hljs-number\">1<\/span> + <span class=\"hljs-number\">1<\/span>\/math.sin(<span class=\"hljs-number\">180deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>));\n  <span class=\"hljs-variable\">$d<\/span>: <span class=\"hljs-number\">50%<\/span>\/(math.tan(<span class=\"hljs-number\">180deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>) + <span class=\"hljs-number\">1<\/span>\/math.cos(<span class=\"hljs-number\">180deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>));\n  <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,from \n    <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.cos(<span class=\"hljs-number\">0<\/span>) \n    <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.sin(<span class=\"hljs-number\">0<\/span>),comma);\n  <span class=\"hljs-keyword\">@for<\/span> <span class=\"hljs-variable\">$i<\/span> from <span class=\"hljs-number\">1<\/span> through <span class=\"hljs-variable\">$n<\/span> {\n    <span class=\"hljs-variable\">$c<\/span>:small ccw;\n    <span class=\"hljs-keyword\">@if<\/span> <span class=\"hljs-variable\">$i<\/span> % <span class=\"hljs-number\">2<\/span> == <span class=\"hljs-number\">0<\/span> {<span class=\"hljs-variable\">$c<\/span>:large cw}\n    <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,arc to \n      <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.cos(<span class=\"hljs-variable\">$i<\/span>*<span class=\"hljs-number\">360deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>)\n      <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-variable\">$d<\/span>*math.sin(<span class=\"hljs-variable\">$i<\/span>*<span class=\"hljs-number\">360deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>)\n      of <span class=\"hljs-variable\">$r<\/span> <span class=\"hljs-variable\">$c<\/span>,comma);\n  } \n  <span class=\"hljs-attribute\">clip-path<\/span>: shape(#{<span class=\"hljs-variable\">$m<\/span>});  \n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SCSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">scss<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>I introduced a new variable&nbsp;<code>$c<\/code>&nbsp;within the loop that will have the value&nbsp;<code>small ccw<\/code>&nbsp;when&nbsp;<code>$i<\/code>&nbsp;is odd and&nbsp;<code>large cw<\/code>&nbsp;otherwise.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pvvKwgj\/d6d81509ba2adb665fea8676b6ad03eb\" src=\"\/\/codepen.io\/anon\/embed\/pvvKwgj\/d6d81509ba2adb665fea8676b6ad03eb?height=450&amp;theme-id=47434&amp;slug-hash=pvvKwgj\/d6d81509ba2adb665fea8676b6ad03eb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pvvKwgj\/d6d81509ba2adb665fea8676b6ad03eb\" title=\"CodePen Embed pvvKwgj\/d6d81509ba2adb665fea8676b6ad03eb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Cool right? The compiled code will look like the below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">clip-path: <br>  shape(from X0 Y0, <br>     arc to X1 Y1 of R small ccw,<br>     arc to X2 Y2 of R large cw,<br>     arc to X3 Y3 of R small ccw,<br>     arc to X4 Y4 of R large cw,<br>     ...<br>  )<\/pre>\n\n\n\n<p>The first arc will use the inner curve (<code>small ccw<\/code>), the next one the outer curve (<code>large cw<\/code>) and so on. We repeat this to get our wavy-flower shape!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"optimizing-the-code\">Optimizing The Code<\/h2>\n\n\n\n<p>We made a generic code that allow us to get any shape variation by simply controlling the size\/direction of the arcs, but for each particular case, we can have a more simplified code.<\/p>\n\n\n\n<p>For the inverted variation (<code>small ccw<\/code>), the value of&nbsp;<code>D<\/code>&nbsp;can be replaced by&nbsp;<code>50%<\/code>. This will simplify the formula and also increase the area covered by the shape. We also need to update the value of the radius.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"SCSS\" data-shcb-language-slug=\"scss\"><span><code class=\"hljs language-scss\"><span class=\"hljs-variable\">$n<\/span>: <span class=\"hljs-number\">10<\/span>;\n\n<span class=\"hljs-selector-class\">.flower<\/span> {\n  <span class=\"hljs-variable\">$m<\/span>: ();\n  <span class=\"hljs-variable\">$r<\/span>: <span class=\"hljs-number\">50%<\/span>*math.tan(<span class=\"hljs-number\">180deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>);\n  <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,from \n    <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-number\">50%<\/span>*math.cos(<span class=\"hljs-number\">0<\/span>) \n    <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-number\">50%<\/span>*math.sin(<span class=\"hljs-number\">0<\/span>),comma);\n  <span class=\"hljs-keyword\">@for<\/span> <span class=\"hljs-variable\">$i<\/span> from <span class=\"hljs-number\">1<\/span> through <span class=\"hljs-variable\">$n<\/span> {\n    <span class=\"hljs-variable\">$m<\/span>: append(<span class=\"hljs-variable\">$m<\/span>,arc to \n      <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-number\">50%<\/span>*math.cos(<span class=\"hljs-variable\">$i<\/span>*<span class=\"hljs-number\">360deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>)\n      <span class=\"hljs-number\">50%<\/span> + <span class=\"hljs-number\">50%<\/span>*math.sin(<span class=\"hljs-variable\">$i<\/span>*<span class=\"hljs-number\">360deg<\/span>\/<span class=\"hljs-variable\">$n<\/span>)\n      of <span class=\"hljs-variable\">$r<\/span>,comma);\n  } \n  <span class=\"hljs-attribute\">clip-path<\/span>: shape(#{<span class=\"hljs-variable\">$m<\/span>});  \n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">SCSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">scss<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBBXeoL\/e1196659cc093c9a0341df783c78e79a\" src=\"\/\/codepen.io\/anon\/embed\/wBBXeoL\/e1196659cc093c9a0341df783c78e79a?height=450&amp;theme-id=47434&amp;slug-hash=wBBXeoL\/e1196659cc093c9a0341df783c78e79a&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBBXeoL\/e1196659cc093c9a0341df783c78e79a\" title=\"CodePen Embed wBBXeoL\/e1196659cc093c9a0341df783c78e79a\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can do the same for the main shape, but this time we can simplify the value of the radius and use&nbsp;<code>1%<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">$<span class=\"hljs-selector-tag\">n<\/span>: 10;\n\n<span class=\"hljs-selector-class\">.flower<\/span> {\n  $<span class=\"hljs-attribute\">m<\/span>: ();\n  $<span class=\"hljs-attribute\">d<\/span>: <span class=\"hljs-number\">50%<\/span>\/(math.<span class=\"hljs-built_in\">cos<\/span>(<span class=\"hljs-number\">180deg<\/span>\/$n)*(<span class=\"hljs-number\">1<\/span> + math.<span class=\"hljs-built_in\">tan<\/span>(<span class=\"hljs-number\">180deg<\/span>\/$n)));\n  $<span class=\"hljs-attribute\">m<\/span>: <span class=\"hljs-built_in\">append<\/span>($m,from \n    <span class=\"hljs-number\">50%<\/span> + $d*math.cos(<span class=\"hljs-number\">0<\/span>) \n    <span class=\"hljs-number\">50%<\/span> + $d*math.<span class=\"hljs-built_in\">sin<\/span>(<span class=\"hljs-number\">0<\/span>),comma);\n  @for $i from 1 through $n {\n    $<span class=\"hljs-attribute\">m<\/span>: <span class=\"hljs-built_in\">append<\/span>($m,arc to \n      <span class=\"hljs-number\">50%<\/span> + $d*math.cos($i*<span class=\"hljs-number\">360deg<\/span>\/$n)\n      <span class=\"hljs-number\">50%<\/span> + $d*math.<span class=\"hljs-built_in\">sin<\/span>($i*<span class=\"hljs-number\">360deg<\/span>\/$n)\n      of <span class=\"hljs-number\">1%<\/span> cw,comma);\n  } \n  <span class=\"hljs-selector-tag\">clip-path<\/span>: <span class=\"hljs-selector-tag\">shape<\/span>(#{$m});  \n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyyEXbJ\/cf08a8c4c0ae0f68591e84fa5d4ba6c5\" src=\"\/\/codepen.io\/anon\/embed\/yyyEXbJ\/cf08a8c4c0ae0f68591e84fa5d4ba6c5?height=450&amp;theme-id=47434&amp;slug-hash=yyyEXbJ\/cf08a8c4c0ae0f68591e84fa5d4ba6c5&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyyEXbJ\/cf08a8c4c0ae0f68591e84fa5d4ba6c5\" title=\"CodePen Embed yyyEXbJ\/cf08a8c4c0ae0f68591e84fa5d4ba6c5\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This one is interesting because using&nbsp;<code>1%<\/code>&nbsp;as a radius is kind of strange and not intuitive. In the explanation of the arc command, I said that we have exactly two circles with the given radius that intersect with the two points, but what if the radius is smaller than half the distance between the points? No circles can meet that condition.<\/p>\n\n\n\n<p>This case falls into an error handling where the browser will scale the radius until we can have at least one circle that meets the conditions (yes, it\u2019s defined within&nbsp;<a href=\"https:\/\/drafts.csswg.org\/css-shapes-2\/#typedef-shape-arc-command\">the specification<\/a>). That circle will simply have its radius equal to half the distance between both points. It also means we only have two arcs with the same size (<code>small<\/code>&nbsp;and&nbsp;<code>large<\/code>&nbsp;will be equal)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"397\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Bd23aq9Z.png?resize=699%2C397&#038;ssl=1\" alt=\"\" class=\"wp-image-5834\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Bd23aq9Z.png?w=699&amp;ssl=1 699w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Bd23aq9Z.png?resize=300%2C170&amp;ssl=1 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/figure>\n\n\n\n<p>In other words, if you specify a small radius (like&nbsp;<code>1%<\/code>), you are telling the browser to find the radius value for you (a lazy but clever move!). This trick won\u2019t work in all the situations but can be handy in many of them so don\u2019t forget about it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>We are done with this first article! You should have a good overview of the arc command and how to use it. I only studied the particular case of drawing circular arcs but once you get used to this you can move to the elliptic ones even if I think you will rarely need them.<\/p>\n\n\n\n<p>Let\u2019s end with a last demo of a heart shape, where I am using the arc command. Can you figure out how to do it before checking my code?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LEEbdrw\" src=\"\/\/codepen.io\/anon\/embed\/LEEbdrw?height=450&amp;theme-id=47434&amp;slug-hash=LEEbdrw&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LEEbdrw\" title=\"CodePen Embed LEEbdrw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And don\u2019t forget to bookmark&nbsp;<a href=\"https:\/\/css-generators.com\/\">my online generators<\/a>&nbsp;from where you can get the code of the flower shapes and more!<\/p>\n\n\n<div class=\"box article-series\">\n  <header>\n    <h3 class=\"article-series-header\">Article Series<\/h3>\n  <\/header>\n  <div class=\"box-content\">\n            <ol>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/creating-flower-shapes-using-clip-path-shape\/\">Creating Flower Shapes using clip-path: shape()<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/creating-blob-shapes-using-clip-path-shape\/\">Creating Blob Shapes using clip-path: shape()<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.<\/p>\n","protected":false},"author":12,"featured_media":5857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7,352,118],"class_list":["post-5824","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-shape","tag-shapes"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Creating-Flower-Shapes-using-clip-path_-shape.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5824"}],"version-history":[{"count":6,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5824\/revisions"}],"predecessor-version":[{"id":5933,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5824\/revisions\/5933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5857"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}