CODEWITHSUNDEEP
animationsvg
Alec Urtusuastegui
Alec Urtusuastegui

Reputation: 41

SVG not animating on center

I'm not sure what I'm doing wrong but I can't get this animation to center on the center of the SVG.

https://codepen.io/Alecurtu/pen/jOVobxK

  .st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
  transform-origin: 50% 50%;
}

svg {
  animation: 5s Text infinite;
  transform-origin: 50% 50%;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  animation: spin 4s infinite linear;
}

Upvotes: 4

Views: 175

Answers (3)

Alexandr_TT
Alexandr_TT

Reputation: 14545

Answer as a bonus

Consider placing the halves of the text symmetrically in relation to the image

enter image description here

Explanations on how to achieve this:

To obtain this effect, the text is divided into two parts, and each half of the text is placed on a separate arc in the textPath command The beginning of the text and the beginning of the arc must start from the same place.

Therefore, we will take this condition into account when creating arcs. For clarity, attach the end-marker to the end of the arc.

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
 <defs>
          <marker id="end"  refX="10" refY="10"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10"  />
    </marker>
  
 </defs>
 <path marker-end="url(#end)" id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="blue" stroke-width="2" />
 </svg>

Let's create the second arc. The formulas of both arcs differ in only one parameter - the value of sweep-flag

  • sweep-flag ="1", the arc is drawn clockwise
  • sweep-flag ="0" `the arc is drawn counterclockwise

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
 <defs>
          <marker id="end"  refX="18" refY="10"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10"  />
    </marker>
  
 </defs>
 <path id="top" marker-end="url(#end)"  d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="blue" stroke-width="3" /> 
 <path id="bottom" marker-end="url(#end)" d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="crimson" stroke-width="3" />  
 </svg>

  • Place the halves of the text on these arcs

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
 
 <path id="top"  d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 <text  dy="-12px" dx="0" font-size="24px" font-family="Verdana" font-weight="bold" fill="black" letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="5%"> datVault.hyz...coming Soon
    </textPath>  
   </text> 
 <text <text  dy="26px" dx="0" font-size="24px" font-family="Verdana" font-weight="bold" fill="black" letter-spacing="6"  >
 <textPath   xlink:href="#bottom"   startOffset="12%"> join waiting list!!
    </textPath> 
   </text>  
 </svg>

  • Add logo and styles

.container {
width:30vw;
height:auto;
}
 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;} 

#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 400"  >  
  
 <rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
 <path id="top"   d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 
 <text id="txtTop"  dy="-12px" dx="0"  letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="5%"> datVault.hyz...coming Soon</textPath>  
 </text> 
     <text id="txtBottom"   dy="26px" dx="0" letter-spacing="7"  >
        <textPath   xlink:href="#bottom"   startOffset="12%"> join waiting list!!</textPath> 
     </text>    
 </svg>
 </div>

Animation examples

Text animation is implemented by changing the startOffset attribute

Animation starts after click

  • startOffset = "100%", the text is completely hidden
  • startOffset = "0%", the text is fully visible

.container {
width:30vw;
height:auto;
}
 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;} 

#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 400" >  
  
 <rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
 <path id="top"   d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 <text id="txtTop"  dy="-12px" dx="0"  letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="100%"> datVault.hyz...coming Soon 
     <animate id="an"
       attributeName="startOffset"
       begin="svg1.click"
       dur="4s"
       values="100%;5%;5%"
       repeatCount="3"
       restart="whenNotActive"
       fill="freeze" />
    </textPath>  
   </text> 
 <text id="txtBottom"   dy="26px" dx="0" letter-spacing="7"  >
 <textPath   xlink:href="#bottom"   startOffset="100%"> join waiting list!! 
     <animate id="an2"
       attributeName="startOffset"
       begin="svg1.click"
       dur="4s"
       values="100%;12%;12%"
       repeatCount="3"
       restart="whenNotActive"
       fill="freeze" />
    </textPath> 
   </text>  
 </svg>
 </div>

Animating text looping and collapsing text

.container {
width:35vw;
height:auto;

}
 .st0{fill:#FFFF00;}
.st1{fill:#EB008B;} 

#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}  
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 400 400"  >  
  
 <rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
 <path id="top"   d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" /> 
 <path id="bottom"  d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />    
 <text id="txtTop"  dy="-12px" dx="0"  letter-spacing="2"  >
  <textPath  xlink:href="#top"   startOffset="100%"> datVault.hyz...coming Soon 
     <animate id="an" attributeName="startOffset" begin="svg1.click;an.end+1s" dur="8s" values="100%;5%;5%;100%" fill="freeze" />
    </textPath>  
   </text> 
 <text id="txtBottom"   dy="27px" dx="0" letter-spacing="7"  >
 <textPath   xlink:href="#bottom"   startOffset="100%"> join waiting list!! 
     <animate id="an2" attributeName="startOffset" begin="svg1.click;an2.end+1s"  dur="8s" values="100%;12%;12%;100%" fill="freeze" />
    </textPath> 
   </text>  
 </svg>
 </div>

Upvotes: 3

Alexandr_TT
Alexandr_TT

Reputation: 14545

Consider using: textPath

In this case, you will not need to create a path for each letter.

The code will be significantly reduced and if in the future it will be necessary to change the text, then you will only need to change the text inside <text> ... </text>

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  font-size:48px;
  font-weight:bold;
  fill:black;
  letter-spacing:2;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
}
<svg id="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 400 400" >   
    <defs> 
     
      <path id="circ" d="M50 200 A150 150 0 0 1 350 200M350 200 A150 150 0 0 1 50 200" fill="none" stroke="#111111" stroke-width="2" /> 

   </defs>
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
     
       
       
      <text y="-15"   x="10" >
        <textPath   xlink:href="#circ"> datVault.hyz...coming Soon...join waiting list!!
        </textPath> 

      </text>
</g>
</svg>
</div>

You can also style some of the text by surrounding it with <tspan> tags:

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  font-size:46px;
  font-weight:bold;
  fill:black;
  letter-spacing:4;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
}
<svg id="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 400 400" >   
    <defs> 
         <path id="circ" d="M50 200 A150 150 0 0 1 350 200M350 200 A150 150 0 0 1 50 200" fill="none" stroke="#111111" stroke-width="2" /> 
   </defs>
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
     
      
       
      <text y="-15"   x="10" >
        <textPath   xlink:href="#circ"> <tspan style="fill:red">datVault</tspan>.hyz...coming Soon...<tspan style="fill:red"> join</tspan> waiting list!!
        </textPath> 

      </text>
      
     
</g>
</svg>
</div>

Upvotes: 3

Robert Longson
Robert Longson

Reputation: 124059

The thing you're animating needs transform-origin (and a transform-box of fill-box), not the outer svg element.

.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 50%;
  margin: auto;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#Text {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 4s infinite linear;
}
<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 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
  
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
  
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
    V138z"/>
  
  
<g id="Face">
    <g>
        <rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
        <rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
    </g>
  
    <g>
        <rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
        <rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
        <rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
        <rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
        <rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
    </g>
    <g>
        <rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
        <rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
        <rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
    </g>
  </g>
  
 
<g id="Text">
    <path d="M7.2,237.5l33.3-8.9l1.7,6.2l-3,0.7c3,1,4.4,3,5.4,5.9c2,7.4-3,12.1-9.9,14.1c-6.9,2-13.6,0.2-15.5-7.2
        c-0.7-3-0.5-5.7,1.5-7.9l-11.8,3.2L7.2,237.5z M29.8,238.3c-4.9,1.2-6.7,3.7-5.4,7.6c1,3.9,3.7,5.2,8.6,3.7
        c4.9-1.2,6.7-3.7,5.4-7.6C37.2,238,34.8,236.8,29.8,238.3z"/>
    <path d="M30.8,200.8l6.2-0.5l1,9.6l-2.5,0.2c2,1,3.2,3,3.7,6.4c0.5,5.9-3.5,9.1-7.9,9.6c-4.4,0.5-9.1-2-9.6-7.9
        c-0.2-3.7,0.5-5.7,2.2-7.2l-5.4,0.5l1.2,12.8l-5.7,0.5l-2-19.2l19.2-2L30.8,200.8z M29.6,210.6c-2,0.2-3.5,1.7-3,4.9
        c0.2,3.5,2,4.4,3.9,4.2c2-0.2,3.5-1.7,3-4.9C33.3,211.4,31.6,210.4,29.6,210.6z"/>
    <path d="M18.3,187.7l13.6,0.5l0.2-6.7l5.9,0.2l-0.5,13.1L18,194.1l-0.2,3.9l-5.9-0.2l0.2-3.9L3,193.6l0.2-6.4l9.1,0.2l0.2-6.7
        l5.9,0.2L18.3,187.7z"/>
    <path d="M34,164.3l0.2-0.7L8.9,150.5l1.2-6.7l31.1,16.3l-1.7,9.6l-34.8,3.9l1.2-6.7L34,164.3z"/>
    <path d="M46.1,125.1l5.7,2.2l-3.2,8.9l-2.2-0.7c1.2,1.7,1.7,3.9,0.5,7.4c-2,5.7-7.2,6.9-11.3,5.2c-4.2-1.5-7.4-5.7-5.4-11.3
        c1.2-3.5,3-4.9,5.2-5.4l-5.2-2l-4.4,12.1l-5.4-2l6.7-18l18,6.7L46.1,125.1z M40.7,133.2c-2-0.7-3.7,0-4.9,3.2
        c-1.2,3.2,0,4.9,1.7,5.7c2,0.7,3.7,0,4.9-3.2C43.7,135.7,42.7,133.9,40.7,133.2z"/>
    <path d="M59.2,114.7c-3.7,6.7-8.6,8.9-15.8,4.9l-12.6-7.2l3.2-5.7l12.3,6.9c3.9,2.2,5.9,1.5,7.9-2c2-3.5,1.5-5.7-2.5-7.9L39.5,97
        l3.2-5.7l12.6,7.2C62.4,102.6,62.9,108.3,59.2,114.7z"/>
    <path d="M43.2,75.3L71,95.5l-3.7,5.2L39.5,80.4L43.2,75.3z"/>
    <path d="M65.4,71.8l10.1,8.9l4.4-5.2l4.4,3.9l-8.6,9.9L61.2,76.5l-2.7,3L54,75.5l2.7-3l-6.9-5.9l4.2-4.9l6.9,5.9l4.4-5.2l4.4,3.9
        L65.4,71.8z"/>
    <path d="M88.5,67.9l3.9,4.2l-4.7,4.4l-3.9-4.4L88.5,67.9z"/>
    <path d="M101.8,48.4l14.3,5.2l-6.4,4.7l-8.9-3.9l-0.2,0.2l1,9.6l-6.2,4.4l-0.7-15.3l-14.3-5.2l6.2-4.4l9.1,3.7l0.2-0.2l-1-9.6
        l6.4-4.7L101.8,48.4z"/>
    <path d="M128.5,19l14.8,29.8l-18.5,9.4l-2.5-5.7l12.8-6.4l-3-5.9c-0.5,2.2-2.2,4.2-4.9,5.4c-6.9,3.5-11.6,0.7-14.8-5.4L107,29.4
        l5.7-3l5.2,10.6c1.7,3.5,4.2,4.2,7.6,2.5c3.5-1.7,4.2-3.9,2.5-7.6l-5.2-10.6L128.5,19z"/>
    <path d="M159.5,13.6l-8.1,18l12.6-3.9l1.7,5.7L144.3,40l-1.5-4.4l8.1-18l-12.6,3.9l-1.7-5.7l21.5-6.7L159.5,13.6z"/>
    <path d="M175.8,25.7l1,5.9l-6.2,1l-1-5.9L175.8,25.7z"/>
    <path d="M187.9,24l0.7,5.9l-6.4,0.7l-0.7-5.9L187.9,24z"/>
    <path d="M200,23.2l0.2,5.9l-6.4,0.2l-0.2-5.9L200,23.2z"/>
    <path d="M218.2,3.8c7.4,0.5,10.6,5.7,10.4,11.6l-6.4-0.5c0-2.7-0.7-4.9-4.2-5.2c-4.4-0.2-5.4,2-5.9,6.9c-0.2,4.9,0.5,7.4,4.9,7.6
        c3.7,0.2,4.4-1.7,4.9-4.7l6.4,0.5c-0.5,5.9-4.7,10.6-11.8,10.1c-7.9-0.5-11.3-6.4-10.6-14.1C206.2,8.4,210.3,3.3,218.2,3.8z"/>
    <path d="M232.8,18.3c1.7-7.6,7.2-11.8,15-10.1c7.9,1.7,10.8,8.1,8.9,15.5c-1.7,7.6-7.2,11.8-15,10.1
        C234,32.1,231.1,25.7,232.8,18.3z M250.3,22.5c1.2-5.2,0.2-7.4-4.2-8.4c-4.2-1-6.2,0.5-7.4,5.7s-0.2,7.4,3.9,8.4
        C247.3,29.2,249.1,27.7,250.3,22.5z"/>
    <path d="M289.2,51.3l-5.9-2.7l8.1-17.8l-7.4-3.5l-8.1,17.8l-5.9-2.7l8.1-17.8l-7.4-3.5L262.6,39l-5.9-2.7l10.6-23.2l32.3,14.5
        L289.2,51.3z"/>
    <path d="M311.9,36.6l-13.8,21.2l-5.4-3.5l13.8-21.2L311.9,36.6z M316.9,28.9l-2.7,4.2l-5.4-3.5l2.7-4.2L316.9,28.9z"/>
    <path d="M320.1,75.3l-4.9-4.2l12.6-15l-7.9-6.7l-12.6,15.3l-4.9-4.2L318.6,41l17.8,14.8L320.1,75.3z"/>
    <path d="M357.8,79.7l-25.2,21.7l-13.1-15.3l4.4-3.9l9.1,10.4l5.2-4.4c-2.2,0-4.7-0.7-6.9-3.5c-4.9-5.7-3-11.8,2-16
        c4.9-4.2,11.3-5.2,16.3,0.5c2.2,2.7,2.7,5.2,2.2,7.6l2-1.7L357.8,79.7z M345,82.2c3-2.5,3.5-5.2,0.7-8.4c-2.7-3.2-5.4-3-8.4-0.5
        c-3,2.5-3.7,5.2-0.7,8.4C339.3,85.1,341.8,84.9,345,82.2z"/>
    <path d="M360,110.3c-1,5.4,0,11.6,1.7,15.5s3.5,6.2,6.4,4.7c2.7-1.2,2.2-3.9,1-10.4c-1.7-8.9-1-13.1,3.9-15.3
        c6.4-2.7,10.8,0.5,14.1,7.6c1.7,3.7,2.7,8.9,2.5,12.6l-5.4,2.5c-0.5-5.2-1.5-10.4-2.7-13.1c-1.2-3-3-4.9-5.4-3.7
        c-2.2,1-2,3.7-1,8.6c2,9.6,2.2,14.1-3.9,16.8c-6.7,3-11.6-0.7-14.8-7.9c-2-4.4-3.2-11.3-2.2-15.5L360,110.3z"/>
    <path d="M375.3,139.6c7.4-2,13.8,1,15.8,8.6s-2.2,13.3-9.6,15c-7.4,2-13.8-1-15.8-8.6C363.5,147,367.7,141.6,375.3,139.6z
         M379.7,157.1c5.2-1.2,6.7-3.2,5.7-7.4c-1-4.2-3.2-5.2-8.4-3.9c-5.2,1.2-6.7,3.2-5.7,7.4C372.3,157.6,374.3,158.6,379.7,157.1z"/>
    <path d="M382,167.7c7.6-0.7,13.6,3.2,14.3,11.1c0.7,7.9-4.2,12.8-12.1,13.3c-7.6,0.7-13.6-3.2-14.3-11.1
        C369.1,173.2,374.3,168.5,382,167.7z M383.7,185.7c5.4-0.5,7.2-2.2,6.7-6.4c-0.5-4.4-2.5-5.7-7.6-5.2c-5.4,0.5-7.2,2.2-6.7,6.4
        C376.3,185,378.3,186.2,383.7,185.7z"/>
    <path d="M369.9,219.5l0.5-6.4l19.5,1.5l0.7-10.4l-19.5-1.5l0.5-6.4l25.4,1.7l-1.7,23.2L369.9,219.5z"/>
    <path d="M373.3,232.1l-5.9-1.2l1.2-6.4l5.9,1.2L373.3,232.1z"/>
    <path d="M370.4,243.9l-5.7-1.5l1.7-6.2l5.7,1.5L370.4,243.9z"/>
    <path d="M366.4,255.5l-5.7-2l2.2-6.2l5.7,2L366.4,255.5z"/>
    <path d="M381.2,271.3l-2.5,5.9l-30.6-13.3l4.7-10.8l5.4,2.5l-2.2,4.9L381.2,271.3z M386.9,280.9l-4.4-2l2.5-5.9l4.4,2L386.9,280.9z
        "/>
    <path d="M364.9,277c6.7,3.9,9.1,10.4,5.2,17.3c-4.2,6.9-10.8,7.9-17.5,3.9c-6.7-3.9-9.1-10.4-5.2-17.3
        C351.4,274,358.3,273,364.9,277z M355.6,292.7c4.7,2.7,6.9,2.5,9.1-1.2c2.2-3.7,1.5-5.9-3.2-8.6c-4.7-2.7-7.2-2.5-9.4,1.2
        C350.2,287.6,351.1,289.8,355.6,292.7z"/>
    <path d="M355.1,315.2l-20.2-15.3l3.9-5.2L359,310L355.1,315.2z M362.5,320.6l-3.9-3l3.9-5.2l3.9,3L362.5,320.6z"/>
    <path d="M315.9,320.4l4.4-4.7l14.1,13.6l7.2-7.4l-14.1-13.6l4.4-4.7l18.2,17.8l-16.3,16.5L315.9,320.4z"/>
    <path d="M273,376.8l-6.2-25.4l9.6-4.9l12.3,14.8l0.7-0.2l-4.9-18.5l9.6-4.9l17,19.7l-5.9,3l-12.6-14.8l-0.7,0.2l4.9,18.7l-9.9,4.9
        l-12.3-14.8l-0.7,0.2l4.7,18.7L273,376.8z"/>
    <path d="M237.7,366.2l-1.5-5.9l9.4-2.5l0.7,2.5c0.7-2,2.2-3.7,5.9-4.7c5.9-1.5,9.6,2,10.8,6.2c1.2,4.4-0.5,9.4-6.2,10.8
        c-3.5,1-5.7,0.2-7.4-1l1.5,5.2l12.3-3.5l1.5,5.4l-18.5,4.9l-4.9-18.5L237.7,366.2z M247.6,365.7c0.5,2,2.2,3.2,5.4,2.2
        c3.2-1,4.2-2.7,3.5-4.7c-0.5-2-2.2-3.2-5.4-2.2C247.8,362,246.8,363.8,247.6,365.7z"/>
    <path d="M229.3,386.4l-3.7-25.2l6.4-1l3.7,25.2L229.3,386.4z M230.8,395.6l-0.7-4.9l6.4-1l0.7,4.9L230.8,395.6z"/>
    <path d="M213.3,382l-0.7-13.6l-6.7,0.5l-0.2-5.9l13.1-0.7l1.2,19.5l3.9-0.2l0.2,5.9l-3.9,0.2l0.5,9.1l-6.4,0.2l-0.5-9.1l-6.7,0.5
        l-0.2-5.9L213.3,382z"/>
    <path d="M191.8,397l0.2-4.9l6.4,0.2l-0.2,4.9L191.8,397z M192.3,387.9l1.2-25.4l6.4,0.2l-1.2,25.4L192.3,387.9z"/>
    <path d="M165.7,358.6l6.4,1l-3.2,19.2l10.1,1.7l3.2-19.2l6.4,1l-4.2,25.2l-22.9-3.9L165.7,358.6z"/>
    <path d="M130.9,373.9l10.8-31.6L161,349l-2,5.7l-13.1-4.4l-2.2,6.4c2-1,4.4-1.7,7.9-0.5c6.9,2.5,8.6,8.9,6.4,14.8
        c-2,5.9-7.2,10.1-14.3,7.6c-3.5-1.2-4.9-3.2-5.7-5.4l-1,2.5L130.9,373.9z M140.6,365.2c-1.2,3.7-0.5,6.2,3.7,7.6s6.2-0.2,7.4-3.7
        c1.2-3.7,0.5-6.2-3.7-7.6C144,360.1,142,361.3,140.6,365.2z"/>
    <path d="M95.4,365.2l18.2-29.3l5.4,3.5l-18.2,29.3L95.4,365.2z"/>
    <path d="M83.6,357.1l3-3.9l5.2,3.7l-3,3.9L83.6,357.1z M89,349.7l14.8-20.5l5.2,3.7l-14.8,20.5L89,349.7z"/>
    <path d="M93.7,333.2c-1.5-5.2-3.2-7.9-5.9-10.4c-1.7-1.5-3.2-1.5-3.9-0.7c-1,1-0.7,2.2,1.7,5.2c4.9,6.2,4.4,9.9,2,12.8
        c-3.5,3.7-8.1,2.7-12.1-1c-2.5-2.2-4.9-5.7-5.4-8.4l3.9-4.4c1.5,3.7,3.9,6.9,5.9,8.9c1.2,1.2,2.5,1.2,3.2,0.5c0.7-1,0.7-2-1.5-5.2
        c-4.4-6.2-5.4-9.1-2.2-12.8c3.5-3.7,8.6-3,12.8,1c3,2.5,4.9,5.4,5.9,9.6L93.7,333.2z"/>
    <path d="M61.9,315.9l10.4-8.9l-4.4-5.2l4.4-3.9l8.6,10.1l-14.8,12.6l2.5,3l-4.4,3.9l-2.5-3l-6.9,5.9l-4.2-4.9l6.9-5.9l-4.4-5.2
        l4.4-3.9L61.9,315.9z"/>
    <path d="M41.7,313.2L38,308L58.2,294l3.7,5.2L41.7,313.2z M61.7,291.5l3.9-2.7l3.7,5.2l-3.9,2.7L61.7,291.5z"/>
    <path d="M33.8,301.4l-3.2-5.4l21.2-12.6l3.2,5.4L33.8,301.4z M55.2,281.2l4.2-2.5l3.2,5.4l-4.2,2.5L55.2,281.2z"/>
</g>
</svg>
</div>

Upvotes: 1

Related Questions