I am trying to make a svg animation, as the demo shows when I scale the charge fill of svg, it was pushed to the container's left edge.
Is it possible to keep the x,y attributes of the path in the svg? Or is my svg made impossible to animate correctly?
.svg {
width: 40%;
}
#charge {
/* animation: charge 1s ease infinite; */
transform: scaleX(0.1);
}
#keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>
To avoid setting pixel value on the transform-origin you can also adjust the transform-box to have the transform-origin relative to the element and not the whole SVG:
.svg {
width: 40%;
}
#charge {
transform-origin: left;
transform-box:fill-box;
animation: charge 1s ease infinite;
transform: scaleX(0.1);
}
#keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>
You can use the transform-origin property allows you to change the position of transforming elements. The default values are 50%, 50%, making your transforms start in the middle of the element.
.svg {
width: 40%;
}
#charge {
transform-origin: 10px;
animation: charge 1s ease infinite;
transform: scaleX(0.1);
}
#keyframes charge {
0% {
transform: scaleX(0.1);
}
100% {
transform: scale(1);
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
</svg>
</div>
You can animate the width instead, to achieve the desired effect:
.svg {
width: 40%;
}
#charge {
width: 10px;
height: 80px;
animation: charge 1s ease infinite;
}
#keyframes charge {
0% {
width: 0;
}
100% {
width: 180px;
}
}
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
<polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
<rect id="charge" x="10" y="10" fill="#0071BC"/>
</svg>
</div>
I am trying to create a sticky menu using SVG. The issue I am having is that the div after the menu has Display: grid; because of this, eventhough the sticky SVG is working, is showing a white space (which corresponds to the height of the SVG) before the div. I noticed that this only happens if I use display grid or flexbox, if I use display: block; the sticky SVG floats the right way and the white space doesn't show.
Is there a way to avoid showing the white area from the SVG and still being able to use grid or flexbox? I want the menu to stick to the whole site. That's why I didn't put it inside the div.
This is the CSS of the sticky menu:
.circle {
position: sticky;
top: 0%;
opacity: 0;
animation: mymove 4s forwards;
float: left;
transform: scale(0.1);
}
#keyframes mymove {
5% {transform: translate(0, 130%) scale(0.5);
opacity: 1;
}
10% {
transform: translate(0, 40%) scale(0.5);
}
12% {transform: translate(0,130%) scale(0.5);
}
35% {transform: translate(350%,130%) scale(0.5);
}
100% {
transform:translate(350%,130%) rotate(300deg) scale(0.2);
opacity: 1;
}
}
This is the CSS of the Div after the menu:
.box {
display: grid;
grid-template-columns: auto auto auto;
height: 1000px;
width: 100%;
background-color: aqua;
}
This is a pen with a copy of the project
body {
margin: 0;
}
path:hover {
fill: yellow;
transform: translate(5% 5%);
transform-origin: 50% 50%;
transition-duration: 1s;
}
.box {
display: grid;
grid-template-columns: auto auto auto;
height: 1000px;
width: 100%;
background-color: aqua;
}
.inside-box {
background-color:#8f0606;
height: 500px;
width: 10rem;
margin: auto;
float: left;
}
.box2 {
height: 1000px;
width: 100%;
background-color: rgb(111, 0, 255);
}
.circle {
position: sticky;
top: 0%;
opacity: 0;
animation: mymove 4s forwards;
float: left;
transform: scale(0.1);
}
#keyframes mymove {
5% {transform: translate(0, 130%) scale(0.5);
opacity: 1;
}
10% {
transform: translate(0, 40%) scale(0.5);
}
12% {transform: translate(0,130%) scale(0.5);
}
35% {transform: translate(350%,130%) scale(0.5);
}
100% {
transform:translate(350%,130%) rotate(300deg) scale(0.2);
opacity: 1;
}
}
.plus {
opacity: 0;
animation: reveal 5s forwards;
}
#keyframes reveal {
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<svg class="circle" width="341" height="341" viewBox="0 0 393 395" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" cx="197.5" cy="195.5" r="182.5"></circle>
<filter x="-4.1%" y="-4.1%" width="108.2%" height="108.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0.106884058 0 0 0 0 0.0827088718 0 0 0 0 0.0827088718 0 0 0 0.163925918 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-3.7%" y="-3.7%" width="107.4%" height="107.4%" filterUnits="objectBoundingBox" id="filter-3">
<feMorphology radius="2" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1.5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.105882353 0 0 0 0 0.0823529412 0 0 0 0 0.0823529412 0 0 0 0.111778846 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<path d="M226.888266,167.71921 L297.316815,167.71921 L297.316815,226.71921 L226.888266,226.71921 L226.888266,297.485871 L167.888266,297.485871 L167.888266,226.71921 L97.3168146,226.71921 L97.3168146,167.71921 L167.888266,167.71921 L167.888266,97.4858706 L226.888266,97.4858706 L226.888266,167.71921 Z" id="path-4"></path>
<filter x="-5.7%" y="-4.8%" width="111.5%" height="111.5%" filterUnits="objectBoundingBox" id="filter-5">
<feMorphology radius="1.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Oval">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#AA3F02" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use stroke-opacity="0" stroke="#AA3F02" stroke-width="6" xlink:href="#path-1"></use>
</g>
<g class="plus" id="Rectangle-2" transform="translate(197.316815, 197.485871) rotate(60.000000) translate(-197.316815, -197.485871) ">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<path stroke="#3F1616" stroke-width="1" d="M226.388266,97.9858706 L168.388266,97.9858706 L168.388266,168.21921 L97.8168146,168.21921 L97.8168146,226.21921 L168.388266,226.21921 L168.388266,296.985871 L226.388266,296.985871 L226.388266,226.21921 L296.816815,226.21921 L296.816815,168.21921 L226.388266,168.21921 L226.388266,97.9858706 Z" stroke-linejoin="square" fill="#1D1639" fill-rule="evenodd"></path>
</g>
</g>
</svg>
<div class="box">
<div class="inside-box"></div>
<div class="inside-box"></div>
<div class="inside-box"></div>
</div>
<div class="box2"></div>
</div>
The issue isn't with sticky but it's due to the float you are using. A float element will by default overlap block element but it won't be the case with flexbox and CSS grid.
Here is a simplified version of your issue.
.box {
display:flex;
width:100%;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
float:left;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}
<div class="stick">
</div>
<div class="box">
</div>
Now if you remove the display:flex you will have this:
.box {
width:100%;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
float:left;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}
<div class="stick">
</div>
<div class="box">
</div>
The above code is the intended result but it won't behave like this if we remove float
.box {
width:100%;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}
<div class="stick">
</div>
<div class="box">
</div>
You have two solutions. The first one is to consider position:fixed instead of sticky since your element is the first element in the DOM and you want it to be sticky to the whole site.
.box {
width:100%;
display:flex;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
background:green;
position:fixed;
top:0;
}
body {
min-height:200vh;
margin:0;
}
<div class="stick">
</div>
<div class="box">
</div>
Or you can consider negative margin on the other container that is equal to the height of the sticky element.
.box {
width:100%;
display:flex;
height:200px;
background:red;
margin-top:-100px;
}
.stick {
height:100px;
width:100px;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}
<div class="stick">
</div>
<div class="box">
</div>
How can I rotate 3 irregular SVG circles around same origin? They are written as a path and reused. I have set transform-origin to center, what else am I missing? They should all be in the same space and overlap in center like in this image
<svg width="900" height="500" viewBox="0 0 900 500">
<defs>
<path id="circle" d="m 43.467262,110.65774 c -2.81733,25.95379 9.663408,54.24201 33.479611,66.3315 12.768318,6.52194 29.493997,6.26667 40.854417,-3.07058 12.79824,-9.29014 25.48168,-19.76411 33.26937,-33.78136 4.54432,-8.49226 5.12542,-19.52979 -0.73083,-27.56368 C 142.27364,100.40343 128.56364,93.579328 115.25185,88.674523 98.350761,82.775856 78.939082,80.223234 62.116925,87.733369 52.940099,92.163321 45.975566,100.79364 43.467262,110.65774 Z" />
</defs>
<g class="group">
<use class="circle circle--1" xlink:href="#circle" />
<use class="circle circle--2" xlink:href="#circle" />
<use class="circle circle--3" xlink:href="#circle" />
</g>
</svg>
svg {
width: 900px;
path {
stroke: #333;
stroke-width: 3px;
fill: transparent;
}
}
g {
position: relative;
transform-origin: center center;
}
.circle {
transform-origin: 50% 50%;
perspective: 500px;
&--1 {
transform: rotateZ(60deg);
}
&--2 {
transform: rotateZ(120deg);
}
&--3 {
transform: rotateZ(180deg);
}
}
https://codepen.io/anon/pen/mQdLvX
You want transform-box: fill-box; i.e.
.circle {
transform-box: fill-box;
transform-origin: 50% 50%;
perspective: 500px;
&--1 {
transform: rotateZ(60deg);
}
&--2 {
transform: rotateZ(120deg);
}
&--3 {
transform: rotateZ(180deg);
}
}
When the svg draw is not centered on the canvas, this gets a bit more difficult. I've ajusted the SVG viewBox values, take a look at the following snippet:
svg {
border: 1px solid red;
}
svg path {
stroke: #333;
stroke-width: 3px;
fill: transparent;
}
.circle {
transform-origin: 50% 50%;
}
.circle--1 {
transform: rotateZ(90deg);
}
.circle--2 {
transform: rotateZ(160deg);
}
.circle--3 {
transform: rotateZ(270deg);
}
<svg width="900" height="500" viewBox="0 0 250 250">
<defs>
<path id="circle" d="m 43.467262,110.65774 c -2.81733,25.95379 9.663408,54.24201 33.479611,66.3315 12.768318,6.52194 29.493997,6.26667 40.854417,-3.07058 12.79824,-9.29014 25.48168,-19.76411 33.26937,-33.78136 4.54432,-8.49226 5.12542,-19.52979 -0.73083,-27.56368 C 142.27364,100.40343 128.56364,93.579328 115.25185,88.674523 98.350761,82.775856 78.939082,80.223234 62.116925,87.733369 52.940099,92.163321 45.975566,100.79364 43.467262,110.65774 Z" />
</defs>
<g class="group">
<use class="circle circle--1" xlink:href="#circle" />
<use class="circle circle--2" xlink:href="#circle" />
<use class="circle circle--3" xlink:href="#circle" />
</g>
</svg>
Recently I began experimenting with CSS Animations over an SVG definition created by someone else and I found something I could n't solve by myself. And given my little about SVG, it was hard to Google a solution.
Here's what I've got:
#charset "utf-8";
body, html{
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
/*animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;*/
}
.right {
transform-origin: 605px 555px;
/*animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;*/
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 796.209 765.469" enable-background="new 0 0 796.209 765.469" xml:space="preserve">
<g>
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>
It's static, I know, I've commented out the animation part which, in this early stage, is simply to make the <path> spin counter-clockwise.
But if you uncomment the animation lines you'll notice that, at some angles of the rotation, the vertices disappear, like if the whole SVG is behind something with some sort of background (like the tricks we usually do with overflow).
From the little I could dig up, I came to think that the problem is with the <svg> definition. In all examples I've seen, none of them was like that. I tried removing the width and height attributes as several tutorials suggested and even increasing the viewBox or add some padding (that was really a blind-shot) but nothing changed.
What could possibly be wrong?
Increasing the viewBox solves the issue on my side:
body,
html {
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.right {
transform-origin: 605px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">
<g>
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>