/*
* 4 February 2022
* CSS No DIV Geometric Blooming Flower 🌻
* inspired by Robin Davey's artwork 👉 tmblr.co/Zm4Rmx2Nv6bXq
* based on the concept of my SVG-in-CSS Flipping Checkerboard 👉 https://codepen.io/ShadowShahriar/pen/podoZKr
* made this CodePen for my best friend ❤
* thank you for all the love and support you have given me since the beginning
*
* recommended view: Full Page
* tested on Firefox v96.0.1/x64, Chrome v97.0.4692.99/x64, Brave v1.31.87/x64, Edge v97.0.1072.76, and Chrome for Android v81.0.4044.138/Android 4.4.2
*
* more info. in the details view
*/
@use 'sass:math';
@use 'sass:color';
// === petal geometry ===
$large-petals-count: 12;
$small-petals-count: 8;
// === colors for petal generation ===
$large-petal-color: #ffcc3b;
$mid-petal-color-1: #ffb534;
$mid-petal-color-2: #ff8f2c;
$small-petal-color: #ffd234;
$petal-root-color: #d06500;
// === as stated in the official documentation (https://sass-lang.com/documentation/breaking-changes/slash-div), using slash (/) as a division operation was deprecated since `Dart Sass v1.33.0` and developers are encouraged to use `math.div` function instead. At present, CodePen offers `Dart Sass 1.32.0`. Hence, I've made a tiny wrapper function for backwards compatibility ===
@function devide($n, $dn) {
// @return math.div($n, $dn);
@return $n / $dn;
}
html {
--zoom: 120;
// === animation configuration ===
--animation-speed: 100; // any value between 1-200. a low value will make the animation slower. values more than 200 will make it look static
--animation-delay: 500ms; // the compiled CSS is over 40KB and requires more computation effort, making the animation glitchy. we add a delay to ensure browsers can process the CSS before the animation begins
--leaf-duration: 1s;
--leafs-start-from: 100deg;
--leaf-1-delay: 500ms;
--leaf-2-delay: 580ms;
--leaf-3-delay: 600ms;
--leaf-timing-func: cubic-bezier(0.18, 0.89, 0.32, 1.28);
--petal-duration: 1s;
--petals-start-from: 50deg;
--petal-1-delay: 0ms;
--petal-2-delay: 100ms;
--petal-3-delay: 200ms;
--petal-timing-func: cubic-bezier(0.68, -0.55, 0.27, 1.55);
// === appearance ===
--color-leaf: hsl(175, 30%, 31%);
--color-leaf-root: hsl(113, 21%, 51%);
--scene-drop-shadow: drop-shadow(11em 17em 27em rgba(0, 0, 0, 0.37));
--petals-offset: 36em;
--petals-large-radius: 204em;
--petals-mid-radius: 136em;
--petals-small-radius: 82em;
filter: var(--scene-drop-shadow);
}
// === converts hex colors to rgb for use in the generated SVG ===
@function rgb-color($color) {
$r: color.red($color);
$g: color.green($color);
$b: color.blue($color);
@return "rgb(#{$r},#{$g},#{$b})";
}
:root {
--unit: 1vmin;
--available-screen-min: 665;
--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
}
// === quick and dirty reset. also setting the font-size enables us to use em as a responsive unit ===
html,
body,
head {
height: 100%;
position: relative;
padding: 0;
margin: 0;
font-size: calc(1 * var(--px));
background-color: transparent;
}
// === we also need to display <head> as a block element so that we can use its pseudo-elements ===
head {
width: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
}
head::before,
head::after,
body::before,
body::after,
html::before,
html::after {
content: "";
position: absolute;
background-repeat: no-repeat;
// === the following effectively calls the GPU and makes the animation noticeably smoother in Chrome ===
filter: blur(0);
}
// === this returns a polygon clip-path for any possible n-gon (where n = 3, ..., 100) ===
// === percentages are encoded as %25 for use in encoded SVG ===
@function generate-polygon($n) {
$theta: devide(2 * math.$pi, $n);
$point-array: null;
@for $i from 1 through $n {
$a: $theta * $i;
$x: 50% + 50% * math.sin($a);
$y: 50% + 50% * math.cos($a);
$point-array: $point-array, #{$x}25 #{$y}25;
}
@return polygon($point-array);
}
// === this generates n number of divs representing their index in --i CSS variable ===
// === i would like to call them "indexed div"s or idivs ===
@function generate-idivs($n) {
$str: null;
@for $i from 0 to $n {
$str: $str + "%3Cdiv style='--i:#{$i}'%3E%3C/div%3E";
}
@return $str;
}
// === this returns a line tilted to the desired angle ===
@function leaf-root($angle: 130deg) {
@return linear-gradient(
$angle,
#fff0 0,
#fff0 calc(50% - 3em),
var(--color-leaf-root) 50%,
#fff0 calc(50% + 1em),
#fff0 100%
);
}
// === this function places a handful of squares around a circular path. those squares are embedded DOM elements within an SVG container. it returns a background image ===
@function place-petals(
$n,
$size-var,
$ratio-var,
$fill,
$rotate-start: 45deg,
$start: 0.5
) {
$theta: devide(2 * math.$pi, $n);
$shift: $theta * $start;
$layers: null;
@for $i from 1 through $n {
$angle: ($i * $theta) + $shift;
$x: calc(50% + var(#{$ratio-var}) * #{math.cos($angle)});
$y: calc(50% + var(#{$ratio-var}) * #{math.sin($angle)});
$layer-image: url("data:image/svg+xml,\
%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E\
%3CforeignObject width='100%25' height='100%25'%3E\
%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E\
%3Cstyle%3E\
.A{\
position:absolute;left:50px;top:50px;\
width:70px;height:70px;border-radius:8%25;\
transform:translate(-50%25,-50%25) rotate(#{$rotate-start}) rotate(#{$angle}rad);\
background:#{rgb-color($fill)};\
}\
%3C/style%3E%3C/foreignObject%3E%3C/svg%3E");
$this-layer: $layer-image
no-repeat
scroll
$x
$y /
var(#{$size-var})
var(#{$size-var});
$layers: $layers, $this-layer;
}
@return $layers;
}
// === this function creates a camera shutter-like shape by creating a polygon and extending their edges ===
@function create-shutter($n, $size: 25, $thickness: 1, $color: black, $area) {
$grid: 1000;
$multiplier: $grid * 0.01;
$shift: 0.25;
@if $n % 2 == 0 {
$shift: 0.5;
}
$rotate: devide(360, $n) * $shift;
$match: $rotate * -1;
@if $n % 4 == 0 {
$match: 0;
}
@if $n == 3 {
$match: 90;
}
$wrapper: url("data:image/svg+xml,\
%3Csvg viewBox='0 0 #{$grid} #{$grid}' \
width='#{$grid}' height='#{$grid}' \
xmlns='http://www.w3.org/2000/svg'%3E\
%3CforeignObject width='100%' height='100%'%3E\
%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E\
%3Cdiv class='c' style='--n:#{$n}'%3E#{generate-idivs($n)}%3C/div%3E\
%3C/div%3E\
%3Cstyle%3E\
.c{\
--r:#{$size * $multiplier}px;\
--j:calc(360 / var(--n));\
--b:calc((var(--j) * 0.5 + 90) * 1deg);\
--s:#{$rotate}deg;\
--c:translate(-50%25,-50%25);\
transform:var(--c) rotate(var(--s));\
width:100%25;height:100%25;\
border-radius:50%25;\
overflow:hidden;\
}\
.c, .c::before, .c div{\
position:absolute;left:50%25;top:50%25;\
}\
.c::before{\
content:'';padding:var(--r);transform:var(--c) rotate(#{$match}deg);\
clip-path:#{generate-polygon($n)};\
}\
.c div{\
--a:calc(var(--j) * var(--i) * 1deg);\
width:#{$grid}px;height:#{$thickness * $multiplier}px;\
transform:var(--c) rotate(var(--a)) translate(calc(var(--r) * -1)) rotate(var(--b)) var(--c);\
}\
.c::before, .c div{\
background:#{rgb-color($color)};\
}\
%3C/style%3E\
%3C/foreignObject%3E\
%3C/svg%3E");
@return $wrapper no-repeat scroll center center / #{$area} #{$area};
}
// =============
// === LEAFS ===
// =============
head::before,
head::after,
html::before {
transform-origin: right top; // === we want to animate their position from the top-right corner ===
background-size: 100% 100%;
background-color: var(--color-leaf);
box-shadow: inset 0 0 12em 10em var(--color-leaf);
}
head::before {
left: calc(50% - 65em);
top: calc(50% + 109em);
transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from))
rotate(80deg) skewX(6deg) skewY(-30deg);
width: 83em;
height: 128em;
border-radius: 50% 9% 32% 4%;
background-image: leaf-root(2deg), leaf-root(2deg), leaf-root(2deg),
leaf-root(92deg), leaf-root(92deg), leaf-root(92deg), leaf-root();
background-position: -56em 30em, -34em 3em, -14em -22em, -16em 96em, 6em 68em,
27em 43em, 0 15em;
}
head::after {
left: calc(50% - 94em);
top: calc(50% + 98em);
transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from))
rotate(-44deg) skewY(-30deg);
width: 83em;
height: 96em;
border-radius: 25% 9% 32% 4%;
background-image: leaf-root(-93deg), leaf-root(-93deg), leaf-root(-93deg),
leaf-root(-1deg), leaf-root(-1deg), leaf-root(-1deg), leaf-root();
background-position: -12em 64em, 7em 41em, 28em 16em, -56em 16em, -36em -8em,
-15em -32em, 0 0;
}
html::before {
left: calc(50% - 120em);
top: calc(50% + 123em);
transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from))
skewX(-15deg) skewY(-18deg);
width: 113em;
height: 121em;
border-radius: 24% 9% 27% 7%;
background-image: leaf-root(-90deg), leaf-root(-90deg), leaf-root(-90deg),
leaf-root(2deg), leaf-root(1deg), leaf-root(0deg), leaf-root(133deg);
background-position: -19em 79em, 9em 50.4em, 35em 21.4em, -21em -41.6em,
-49em -11em, -74em 18em, 0 0;
}
// =============
// === PETALS ===
// =============
body::before,
body::after,
html::after {
transform: translate(-50%, -50%) rotate(var(--petals-start-from)) scale(0);
left: calc(50% + var(--petals-offset));
top: calc(50% - var(--petals-offset));
}
body::before {
padding: var(--petals-large-radius);
--pointer-size: 73em;
--pointer-ratio: 46%;
--hand-size: 104em;
--hand-ratio: 39.3%;
--fill-size: 220em;
--shine-size: 325em;
--shine-color: rgba(255, 255, 255, 0.29);
--fill: linear-gradient(#{$large-petal-color} 0 0) no-repeat scroll 50% 50% /
var(--fill-size) var(--fill-size);
--shine: radial-gradient(
circle at center,
var(--shine-color) 50%,
transparent 72%
)
no-repeat 50% 50% / var(--shine-size) var(--shine-size);
filter: drop-shadow(-25em 10em 7em rgba(254, 136, 10, 0.1));
background: var(--shine), var(--fill),
place-petals(
$large-petals-count,
"--hand-size",
"--hand-ratio",
$large-petal-color,
0,
0.5
),
place-petals(
$large-petals-count,
"--pointer-size",
"--pointer-ratio",
$large-petal-color
);
}
body::after {
padding: var(--petals-mid-radius);
--pointer-size: 56em;
--pointer-ratio: 49%;
--hand-size: 77em;
--hand-ratio: 40.3%;
--fill-size: 107em;
--fill: linear-gradient(#{$mid-petal-color-2} 0 0) no-repeat 50% 50% /
var(--fill-size) var(--fill-size);
background: var(--fill),
place-petals(
$large-petals-count,
"--pointer-size",
"--pointer-ratio",
$mid-petal-color-1,
45deg,
0
),
place-petals(
$large-petals-count,
"--hand-size",
"--hand-ratio",
$mid-petal-color-2,
0,
0
);
}
html::after {
padding: var(--petals-small-radius);
--pointer-size: 39em;
--pointer-ratio: 48.2%;
--hand-size: 54em;
--hand-ratio: 39.4%;
--fill-size: 49em;
--shine-size: 130em;
--circle-1-size: 100em;
--shutter-size: 70em;
--fill: linear-gradient(#{$mid-petal-color-2} 0 0) no-repeat 50% 50% /
var(--fill-size) var(--fill-size);
--shine: radial-gradient(
circle at center,
#{$mid-petal-color-2} 42%,
transparent 72%
)
no-repeat 50% 50% / var(--shine-size) var(--shine-size);
--circle-1: radial-gradient(
circle at center,
#{$small-petal-color} 48%,
transparent 50%
)
no-repeat 50% 50% / var(--circle-1-size) var(--circle-1-size);
background: create-shutter(10, 20, 1, $petal-root-color, var(--shutter-size)),
var(--circle-1), var(--shine), var(--fill),
place-petals(
$small-petals-count,
"--hand-size",
"--hand-ratio",
$small-petal-color,
0,
0
),
place-petals(
$small-petals-count,
"--pointer-size",
"--pointer-ratio",
$small-petal-color,
45deg,
0
);
}
// === keyframes and animation ===
html {
--ams: calc(100 / var(--animation-speed));
}
body::before,
body::after,
html::after {
animation: bloom var(--petal-timing-func)
calc(var(--petal-duration) * var(--ams)) forwards;
}
body::before {
animation-delay: calc(
(var(--animation-delay) + var(--petal-1-delay)) * var(--ams)
);
}
body::after {
animation-delay: calc(
(var(--animation-delay) + var(--petal-2-delay)) * var(--ams)
);
}
html::after {
animation-delay: calc(
(var(--animation-delay) + var(--petal-3-delay)) * var(--ams)
);
}
@keyframes bloom {
to {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
}
head::before,
head::after,
html::before {
animation: var(--leaf-timing-func) calc(var(--leaf-duration) * var(--ams))
forwards;
}
head::before {
animation-name: leaf1;
animation-delay: calc(
(var(--animation-delay) + var(--leaf-1-delay)) * var(--ams)
);
}
head::after {
animation-name: leaf2;
animation-delay: calc(
(var(--animation-delay) + var(--leaf-2-delay)) * var(--ams)
);
}
html::before {
animation-name: leaf3;
animation-delay: calc(
(var(--animation-delay) + var(--leaf-3-delay)) * var(--ams)
);
}
@keyframes leaf1 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) rotate(80deg)
skewX(6deg) skewY(-30deg);
}
}
@keyframes leaf2 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) rotate(-44deg)
skewY(-30deg);
}
}
@keyframes leaf3 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) skewX(-15deg)
skewY(-18deg);
}
}
!
