Hôm nay mình chia sẻ với các bạn code làm hoa hướng dương chỉ dùng css, bạn không đọc nhầm đâu chỉ bằng css thôi đã có một bông hoa hướng dương rồi đó.
Vẫn là file code ăn liền cho các bạn muốn gửi tặng bạn gái: Tải file hoahuongduong.html
Còn dưới đây mình sẽ show toàn bộ file code cho các bạn muốn đọc code nhé:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoa hướng dương</title>
</head>
<body>
</body>
<style type="text/css">
@charset "UTF-8";
html {
--zoom: 120;
--animation-speed: 100;
--animation-delay: 500ms;
--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);
--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);
}
:root {
--unit: 1vmin;
--available-screen-min: 665;
--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
}
html,
body,
head {
height: 100%;
position: relative;
padding: 0;
margin: 0;
font-size: calc(1 * var(--px));
background-color: transparent;
}
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;
filter: blur(0);
}
head::before,
head::after,
html::before {
transform-origin: right top;
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: linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(130deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
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: linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(130deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
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: linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(0deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(133deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
background-position: -19em 79em, 9em 50.4em, 35em 21.4em, -21em -41.6em, -49em -11em, -74em 18em, 0 0;
}
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(#ffcc3b 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), 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(0) rotate(0.7853981634rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.7071067812) calc(50% + var(--hand-ratio) * 0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(1.308996939rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.2588190451) calc(50% + var(--hand-ratio) * 0.9659258263)/var(--hand-size) var(--hand-size), 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(0) rotate(1.8325957146rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.2588190451) calc(50% + var(--hand-ratio) * 0.9659258263)/var(--hand-size) var(--hand-size), 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(0) rotate(2.3561944902rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.7071067812) calc(50% + var(--hand-ratio) * 0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(2.8797932658rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.9659258263) calc(50% + var(--hand-ratio) * 0.2588190451)/var(--hand-size) var(--hand-size), 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(0) rotate(3.4033920414rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.9659258263) calc(50% + var(--hand-ratio) * -0.2588190451)/var(--hand-size) var(--hand-size), 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(0) rotate(3.926990817rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.7071067812) calc(50% + var(--hand-ratio) * -0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(4.4505895926rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.2588190451) calc(50% + var(--hand-ratio) * -0.9659258263)/var(--hand-size) var(--hand-size), 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(0) rotate(4.9741883682rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.2588190451) calc(50% + var(--hand-ratio) * -0.9659258263)/var(--hand-size) var(--hand-size), 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(0) rotate(5.4977871438rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.7071067812) calc(50% + var(--hand-ratio) * -0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(6.0213859194rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.9659258263) calc(50% + var(--hand-ratio) * -0.2588190451)/var(--hand-size) var(--hand-size), 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(0) rotate(6.544984695rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.9659258263) calc(50% + var(--hand-ratio) * 0.2588190451)/var(--hand-size) var(--hand-size), 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(45deg) rotate(0.7853981634rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.7071067812) calc(50% + var(--pointer-ratio) * 0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(1.308996939rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.2588190451) calc(50% + var(--pointer-ratio) * 0.9659258263)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(1.8325957146rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.2588190451) calc(50% + var(--pointer-ratio) * 0.9659258263)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(2.3561944902rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.7071067812) calc(50% + var(--pointer-ratio) * 0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(2.8797932658rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.9659258263) calc(50% + var(--pointer-ratio) * 0.2588190451)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(3.4033920414rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.9659258263) calc(50% + var(--pointer-ratio) * -0.2588190451)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(3.926990817rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.7071067812) calc(50% + var(--pointer-ratio) * -0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(4.4505895926rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.2588190451) calc(50% + var(--pointer-ratio) * -0.9659258263)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(4.9741883682rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.2588190451) calc(50% + var(--pointer-ratio) * -0.9659258263)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(5.4977871438rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.7071067812) calc(50% + var(--pointer-ratio) * -0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(6.0213859194rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.9659258263) calc(50% + var(--pointer-ratio) * -0.2588190451)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(6.544984695rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.9659258263) calc(50% + var(--pointer-ratio) * 0.2588190451)/var(--pointer-size) var(--pointer-size);
}
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(#ff8f2c 0 0) no-repeat 50% 50% /
var(--fill-size) var(--fill-size);
background: var(--fill), 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(45deg) rotate(0.5235987756rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.8660254038) calc(50% + var(--pointer-ratio) * 0.5)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(1.0471975512rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.5) calc(50% + var(--pointer-ratio) * 0.8660254038)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(1.5707963268rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0) calc(50% + var(--pointer-ratio) * 1)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(2.0943951024rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.5) calc(50% + var(--pointer-ratio) * 0.8660254038)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(2.617993878rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.8660254038) calc(50% + var(--pointer-ratio) * 0.5)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(3.1415926536rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -1) calc(50% + var(--pointer-ratio) * 0)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(3.6651914292rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.8660254038) calc(50% + var(--pointer-ratio) * -0.5)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(4.1887902048rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.5) calc(50% + var(--pointer-ratio) * -0.8660254038)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(4.7123889804rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0) calc(50% + var(--pointer-ratio) * -1)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(5.235987756rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.5) calc(50% + var(--pointer-ratio) * -0.8660254038)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(5.7595865316rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.8660254038) calc(50% + var(--pointer-ratio) * -0.5)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(6.2831853072rad);background:rgb(255,181,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 1) calc(50% + var(--pointer-ratio) * 0)/var(--pointer-size) var(--pointer-size), 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(0) rotate(0.5235987756rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.8660254038) calc(50% + var(--hand-ratio) * 0.5)/var(--hand-size) var(--hand-size), 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(0) rotate(1.0471975512rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.5) calc(50% + var(--hand-ratio) * 0.8660254038)/var(--hand-size) var(--hand-size), 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(0) rotate(1.5707963268rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0) calc(50% + var(--hand-ratio) * 1)/var(--hand-size) var(--hand-size), 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(0) rotate(2.0943951024rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.5) calc(50% + var(--hand-ratio) * 0.8660254038)/var(--hand-size) var(--hand-size), 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(0) rotate(2.617993878rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.8660254038) calc(50% + var(--hand-ratio) * 0.5)/var(--hand-size) var(--hand-size), 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(0) rotate(3.1415926536rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -1) calc(50% + var(--hand-ratio) * 0)/var(--hand-size) var(--hand-size), 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(0) rotate(3.6651914292rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.8660254038) calc(50% + var(--hand-ratio) * -0.5)/var(--hand-size) var(--hand-size), 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(0) rotate(4.1887902048rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.5) calc(50% + var(--hand-ratio) * -0.8660254038)/var(--hand-size) var(--hand-size), 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(0) rotate(4.7123889804rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0) calc(50% + var(--hand-ratio) * -1)/var(--hand-size) var(--hand-size), 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(0) rotate(5.235987756rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.5) calc(50% + var(--hand-ratio) * -0.8660254038)/var(--hand-size) var(--hand-size), 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(0) rotate(5.7595865316rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.8660254038) calc(50% + var(--hand-ratio) * -0.5)/var(--hand-size) var(--hand-size), 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(0) rotate(6.2831853072rad);background:rgb(255,143,44);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 1) calc(50% + var(--hand-ratio) * 0)/var(--hand-size) var(--hand-size);
}
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(#ff8f2c 0 0) no-repeat 50% 50% /
var(--fill-size) var(--fill-size);
--shine: radial-gradient(
circle at center,
#ff8f2c 42%,
transparent 72%
)
no-repeat 50% 50% / var(--shine-size) var(--shine-size);
--circle-1: radial-gradient(
circle at center,
#ffd234 48%,
transparent 50%
)
no-repeat 50% 50% / var(--circle-1-size) var(--circle-1-size);
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' width='1000' height='1000' 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:10'%3E%3Cdiv style='--i:0'%3E%3C/div%3E%3Cdiv style='--i:1'%3E%3C/div%3E%3Cdiv style='--i:2'%3E%3C/div%3E%3Cdiv style='--i:3'%3E%3C/div%3E%3Cdiv style='--i:4'%3E%3C/div%3E%3Cdiv style='--i:5'%3E%3C/div%3E%3Cdiv style='--i:6'%3E%3C/div%3E%3Cdiv style='--i:7'%3E%3C/div%3E%3Cdiv style='--i:8'%3E%3C/div%3E%3Cdiv style='--i:9'%3E%3C/div%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.c{ --r:200px; --j:calc(360 / var(--n)); --b:calc((var(--j) * 0.5 + 90) * 1deg); --s:18deg; --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(-18deg); clip-path:polygon(79.3892626146%25 90.4508497187%25, 97.5528258148%25 65.4508497187%25, 97.5528258148%25 34.5491502813%25, 79.3892626146%25 9.5491502813%25, 50%25 0%25, 20.6107373854%25 9.5491502813%25, 2.4471741852%25 34.5491502813%25, 2.4471741852%25 65.4508497187%25, 20.6107373854%25 90.4508497187%25, 50%25 100%25);}.c div{ --a:calc(var(--j) * var(--i) * 1deg); width:1000px;height:10px; transform:var(--c) rotate(var(--a)) translate(calc(var(--r) * -1)) rotate(var(--b)) var(--c);}.c::before, .c div{ background:rgb(208,101,0);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll center center/var(--shutter-size) var(--shutter-size), var(--circle-1), var(--shine), var(--fill), 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(0) rotate(0.7853981634rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.7071067812) calc(50% + var(--hand-ratio) * 0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(1.5707963268rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0) calc(50% + var(--hand-ratio) * 1)/var(--hand-size) var(--hand-size), 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(0) rotate(2.3561944902rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.7071067812) calc(50% + var(--hand-ratio) * 0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(3.1415926536rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -1) calc(50% + var(--hand-ratio) * 0)/var(--hand-size) var(--hand-size), 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(0) rotate(3.926990817rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.7071067812) calc(50% + var(--hand-ratio) * -0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(4.7123889804rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0) calc(50% + var(--hand-ratio) * -1)/var(--hand-size) var(--hand-size), 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(0) rotate(5.4977871438rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.7071067812) calc(50% + var(--hand-ratio) * -0.7071067812)/var(--hand-size) var(--hand-size), 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(0) rotate(6.2831853072rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 1) calc(50% + var(--hand-ratio) * 0)/var(--hand-size) var(--hand-size), 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(45deg) rotate(0.7853981634rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.7071067812) calc(50% + var(--pointer-ratio) * 0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(1.5707963268rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0) calc(50% + var(--pointer-ratio) * 1)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(2.3561944902rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.7071067812) calc(50% + var(--pointer-ratio) * 0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(3.1415926536rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -1) calc(50% + var(--pointer-ratio) * 0)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(3.926990817rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * -0.7071067812) calc(50% + var(--pointer-ratio) * -0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(4.7123889804rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0) calc(50% + var(--pointer-ratio) * -1)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(5.4977871438rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 0.7071067812) calc(50% + var(--pointer-ratio) * -0.7071067812)/var(--pointer-size) var(--pointer-size), 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(45deg) rotate(6.2831853072rad);background:rgb(255,210,52);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--pointer-ratio) * 1) calc(50% + var(--pointer-ratio) * 0)/var(--pointer-size) var(--pointer-size);
}
html {
--ams: calc(100 / var(--animation-speed));
}
body::before,
body::after,
html::after {
-webkit-animation: bloom var(--petal-timing-func) calc(var(--petal-duration) * var(--ams)) forwards;
animation: bloom var(--petal-timing-func) calc(var(--petal-duration) * var(--ams)) forwards;
}
body::before {
-webkit-animation-delay: calc( (var(--animation-delay) + var(--petal-1-delay)) * var(--ams) );
animation-delay: calc( (var(--animation-delay) + var(--petal-1-delay)) * var(--ams) );
}
body::after {
-webkit-animation-delay: calc( (var(--animation-delay) + var(--petal-2-delay)) * var(--ams) );
animation-delay: calc( (var(--animation-delay) + var(--petal-2-delay)) * var(--ams) );
}
html::after {
-webkit-animation-delay: calc( (var(--animation-delay) + var(--petal-3-delay)) * var(--ams) );
animation-delay: calc( (var(--animation-delay) + var(--petal-3-delay)) * var(--ams) );
}
@-webkit-keyframes bloom {
to {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
}
@keyframes bloom {
to {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
}
head::before,
head::after,
html::before {
-webkit-animation: var(--leaf-timing-func) calc(var(--leaf-duration) * var(--ams)) forwards;
animation: var(--leaf-timing-func) calc(var(--leaf-duration) * var(--ams)) forwards;
}
head::before {
-webkit-animation-name: leaf1;
animation-name: leaf1;
-webkit-animation-delay: calc( (var(--animation-delay) + var(--leaf-1-delay)) * var(--ams) );
animation-delay: calc( (var(--animation-delay) + var(--leaf-1-delay)) * var(--ams) );
}
head::after {
-webkit-animation-name: leaf2;
animation-name: leaf2;
-webkit-animation-delay: calc( (var(--animation-delay) + var(--leaf-2-delay)) * var(--ams) );
animation-delay: calc( (var(--animation-delay) + var(--leaf-2-delay)) * var(--ams) );
}
html::before {
-webkit-animation-name: leaf3;
animation-name: leaf3;
-webkit-animation-delay: calc( (var(--animation-delay) + var(--leaf-3-delay)) * var(--ams) );
animation-delay: calc( (var(--animation-delay) + var(--leaf-3-delay)) * var(--ams) );
}
@-webkit-keyframes leaf1 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) rotate(80deg) skewX(6deg) skewY(-30deg);
}
}
@keyframes leaf1 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) rotate(80deg) skewX(6deg) skewY(-30deg);
}
}
@-webkit-keyframes leaf2 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) rotate(-44deg) skewY(-30deg);
}
}
@keyframes leaf2 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) rotate(-44deg) skewY(-30deg);
}
}
@-webkit-keyframes leaf3 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) skewX(-15deg) skewY(-18deg);
}
}
@keyframes leaf3 {
to {
transform: translate(-50%, -50%) scale(1) rotate(0deg) skewX(-15deg) skewY(-18deg);
}
}
</style>
</html>
