{"id":1021,"date":"2024-02-29T09:04:12","date_gmt":"2024-02-29T15:04:12","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1021"},"modified":"2024-10-30T20:21:57","modified_gmt":"2024-10-31T01:21:57","slug":"creating-flower-shapes-using-css-mask-trigonometric-functions","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/creating-flower-shapes-using-css-mask-trigonometric-functions\/","title":{"rendered":"Creating Flower Shapes using CSS Mask & Trigonometric Functions"},"content":{"rendered":"\n

Creating unusual shapes is always a fun exercise and a good way to practice your CSS skills. One might argue that SVG is better for this job, but nowadays we have a lot of new CSS tricks that allow us to create shapes with a clean and optimized code. Through this two-article series, we will explore what can be done with CSS nowadays.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Creating Flower Shapes using CSS Mask & Trigonometric Functions<\/a>\n <\/li>\n
  2. \n Creating Wavy Circles with Fancy Animations in CSS<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    In this article, we are going to create flower-like shapes. We are going to rely on modern features like mask, trigonometric functions, CSS variables, etc.<\/p>\n\n\n\n

    \"four<\/figure>\n\n\n\n

    Before we start, you can take a look at my online generator for flower shapes<\/a> to get an overview of what we are building here. You can easily define your settings and get the CSS code in no time. Some of the code we will be writing can be complex so it\u2019s always good to have a generator to make our life easy. That said I invite you to keep reading to understand the logic behind the code you are copying and be able to tweak it if needed. <\/p>\n\n\n\n

    The Geometry of A Flower Shape<\/h2>\n\n\n\n

    The structure of the flower shape can be seen as small circles placed around a bigger one. <\/p>\n\n\n\n

    \"final\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    Consider that the small circles touch each other without overlapping each other. This will make the calculation a bit challenging as we will need accurate formulas. Turns out this is a perfect use case for trigonometric functions in CSS.<\/p>\n\n\n\n

    The shape can be controlled using 2 variables; the number of small circles (N<\/code>) and their radius (R<\/code>). From there we can identify the size of the whole shape and the radius of the big circle.<\/p>\n\n\n\n

    Here is a figure to illustrate some of the values and from where we can extract the different formulas.<\/p>\n\n\n\n

    \"geometry<\/figure>\n\n\n\n

    I won\u2019t start a boring geometry course so I will jump straight to the formulas we need to use. The size of the element is equal to<\/p>\n\n\n

    2 * (X<\/span> + R<\/span>) = 2 * (R<\/span>\/sin<\/span>(180deg<\/span>\/N<\/span>) + R<\/span>) = 2 * R<\/span> * (1 + 1\/sin<\/span>(180deg<\/span>\/N<\/span>))<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    and the radius of the big circle is equal to<\/p>\n\n\n
    C<\/span>  = R<\/span>\/tan<\/span>(180deg<\/span>\/N<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    We have all that we need to start writing some code.<\/p>\n\n\n\n
    Coding The Shape<\/h2>\n\n\n\n
    The main challenge is to rely on a single element. We are not going to consider a complex HTML structure where each circle is a different element. Instead, we will only use one<\/em> element (and no pseudo-elements either!)<\/p>\n\n\n\n
    I mentioned mask<\/code>, we’ll be using that, and gradients will allow us to do the shape drawing we want to do. Since it\u2019s all about circles we are going to use radial-gradient()<\/code>. We will also use a bit of Sass (for the looping feature) to control the number of circles. The number of gradients will depend on the number of circles and with Sass we can write a loop to generate the needed gradients.<\/p>\n\n\n\n
    Let\u2019s start by setting the different variables and the shape size:<\/p>\n\n\n
    $n<\/span>: 12; \/* the number of circles\/petals *\/<\/span>\n\n.flower<\/span> {\n  --r<\/span>: 30px<\/span>; \/* the radius of the small circles *\/<\/span>\n  width<\/span>: calc<\/span>(2<\/span>*var(--r)*(1<\/span> + 1<\/span>\/sin<\/span>(180deg<\/span>\/#{$n})));\n  aspect-ratio<\/span>: 1<\/span>;\n  mask<\/span>: radial-gradient<\/span>(#000<\/span> calc(var(--r)\/tan<\/span>(180deg<\/span>\/#{$n})),#0000<\/span> 0<\/span>);\n  background<\/span>: \/* you background coloration *\/<\/span>\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Nothing fancy so far, we simply translated the previous formulas using code. I also added the big circle so all that we are missing is the small ones. The Sass code to generate them will look like this:<\/p>\n\n\n
    $m<\/span>: (); \/* empty variable *\/<\/span>\n@for<\/span> $i<\/span> from 1<\/span> through ($n<\/span>) { \/* loop through the number of circles*\/<\/span>\n  $m<\/span>: append($m<\/span>, \n    radial-gradient(50%<\/span> 50%<\/span>,#000<\/span> 100%<\/span>,#0000<\/span>) no-repeat\n    x y \/ calc(2<\/span>*var(--r)) calc(2<\/span>*var(--r)), \n  comma);\n}\n<\/code><\/span>Code language:<\/span> SCSS<\/span> (<\/span>scss<\/span>)<\/span><\/small><\/pre>\n\n\n
    --r<\/code> defines the radius so the size of each gradient will be equal to calc(2*var(--r))<\/code>. Then we need to identify the position of each gradient (the x y<\/code>).<\/p>\n\n\n\n
    Here as well, we need to consider some geometry formulas<\/p>\n\n\n
    x = calc(50% + 50%*cos(360deg*#{$i<\/span>\/$n<\/span>})) \ny = calc(50% + 50%*sin(360deg*#{$i<\/span>\/$n<\/span>}))<\/code><\/span>Code language:<\/span> SCSS<\/span> (<\/span>scss<\/span>)<\/span><\/small><\/pre>\n\n\n
    The final code will be:<\/p>\n\n\n
    $n<\/span>: 6<\/span>; \/* the number of circles\/petals *\/<\/span>\n\n.flower<\/span> {\n  --r: 30px<\/span>; \/* the radius of the small circles *\/<\/span>\n  width<\/span>: calc(2<\/span>*var(--r)*(1<\/span> + 1<\/span>\/sin(180deg<\/span>\/#{$n<\/span>})));\n  aspect-ratio: 1<\/span>;\n  $m<\/span>: (); \/* empty variable *\/<\/span>\n  @for<\/span> $i<\/span> from 1<\/span> through ($n<\/span>) { \/* loop through the number of circles*\/<\/span>\n    $m<\/span>: append($m<\/span>, \n      radial-gradient(50%<\/span> 50%<\/span>,#000<\/span> 100%<\/span>,#0000<\/span>) no-repeat\n      calc(50%<\/span> + 50%<\/span>*cos(360deg<\/span>*#{$i<\/span>\/$n<\/span>})) \n      calc(50%<\/span> + 50%<\/span>*sin(360deg<\/span>*#{$i<\/span>\/$n<\/span>}))\n     \/ calc(2<\/span>*var(--r)) calc(2<\/span>*var(--r)), \n    comma);\n  }\n  mask<\/span>: radial-gradient(#000<\/span> calc(var(--r)\/tan(180deg<\/span>\/#{$n<\/span>})),#0000<\/span> 0<\/span>),{$m<\/span>};\n  background<\/span>: \/* you background coloration *\/\n}<\/code><\/span>Code language:<\/span> SCSS<\/span> (<\/span>scss<\/span>)<\/span><\/small><\/pre>\n\n\n
    Note how the mask<\/code> property takes the value generated using Sass in addition to the gradient that creates the big circle.<\/p>\n\n\n\n
    Our shape is done!<\/p>\n\n\n\n