We Keep Coding

Play SVG when entering viewport - Browser Support?

I have the following script that plays my SVGs when they scroll into view (i have several of these SVGs on the page). This works perfectly but only in Firefox! Is this the correct way to do it or is there a better code that will work on other browsers? Ideally, if it can't work on IE, and i am expecting this, then the SVG would just appear like an image and not animated. But i would expect it to work in all other browsers!
<div id="arrow-2id" class="arrow-2 leftarrows">
<!--START ARROW 2-->
<svg id="arrow2svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.009 303.044">
<script type="text/javascript">
var diva2 = document.getElementById("arrow-2id");
window.addEventListener("scroll", function() {
if (document.documentElement.scrollTop >= diva2.offsetTop - -500) {
diva2.classList.add("play");
}
}
);
</script>
<mask id="arrow2-mask1" maskUnits="userSpaceOnUse">
<path d="M272.304,11.13c-85-31.5-421.5,178.5-175,268.5"/>
</mask>
<mask id="arrow2-mask2" maskUnits="userSpaceOnUse">
<path d="M-3.696,293.63
c130.667-12.167,130.667,23.5,58.5-89.5"/>
</mask>
<path mask="url(#arrow2-mask1)" fill="#42A8FC" d="M74.443,277.599c-22.03-9.911-41.892-24.317-56.394-41.811c-32.086-38.702-16.961-81.441,14.377-119.45
c8.258-9.874,27.106-28.748,31.125-32.337C95.94,55.065,133.39,29.76,173.667,13.682c21.596-8.622,49.867-18.374,71.02-11.181
c10.227,3.479,20.322,12.379,20.322,14.696c-0.002,2.317-8.945-0.005-10.693-0.368c-5.762-1.199-13.512-0.332-19.262,0.301
c-22.932,2.51-47.227,13.269-68.383,23.897c-60.319,27.104-104.662,75.694-105.099,75.646
c-12.522,12.951-23.527,26.688-32.052,40.988c-32.137,53.904,3.738,93.021,50.723,109.687
C91.345,270.88,88.917,283.693,74.443,277.599z"/>
<path mask="url(#arrow2-mask2)" fill="#42A8FC" d="M74.443,277.599c-20.021,1.14-40.042,2.28-60.062,3.422c-16.744,0.952-18.679,22.91-2.629,21.996
c30.077-1.713,60.152-3.425,90.23-5.14c8.539-0.484,17.633-7.912,13.074-16.089c-13.158-23.591-26.316-47.181-39.471-70.771
c-6.476-11.604-30.8-2.861-23.525,10.185c8.394,15.048,19.787,31.097,28.182,46.146c5.811,8.531,5.436,9.656,5.436,9.656
L74.443,277.599z"/>
</svg>
<style>
.play #arrow2-mask1 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 478.362 478.362;
stroke-dashoffset: 0;
animation: brush2a 2s linear ;
animation-fill-mode: forwards;
}
.play #arrow2-mask2 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 203.128 203.128;
stroke-dashoffset: 0;
animation: brush2b 2s linear ;
animation-fill-mode: forwards;
}
#keyframes brush2a {
0% { stroke-dashoffset: 478.362; }
25% { stroke-dashoffset: 478.362; }
75% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
#keyframes brush2b {
0% { stroke-dashoffset: 203.128; }
80% { stroke-dashoffset: 203.128; }
100% { stroke-dashoffset: 0; }
}
</style>
<!--END ARROW 2-->
</div>

SVG doesn't fill once the animation is over

My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation Doesn't fill once it is over.
My website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/
If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want to fill once the animation is over.
Is there some way i can let it fill once the animation is over?
HTML:
<div class="photoshop">
<svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg>
</div>
CSS:
.photoshop {
height: 100px;
width: 100px;
opacity: 0;
}
.js-photoshop-animate{
opacity: 1;
}
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
100% {
stroke-dashoffset: 0;
}
}
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG finished * {
fill-opacity: 1;
}
JAVASCRIPT:
var $photoshop = $('.photoshop');
$photoshop.waypoint(function(){
console.log('Waypoint!');
$photoshop.addClass('js-photoshop-animate rzzhgcav_0');
}, {offset: '90%'} );
/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
obj.el.classList.add('finished');
});

Include multiple attributes in your animation, leave off the transition:
Start and end of the individual property animations can overlap if you leave out the property you want to "run through" a keyframe:
If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 5000ms 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
0% {
stroke-dashoffset: 27047;
fill-opacity: 0
animation-timing-function: ease-in-out
}
50% {
fill-opacity: 0
animation-timing-function: linear
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1
}
}

Animate an SVG line when another div is clicked

I'm trying to achieve this:
Click a Div with an onclick function, and then apply a css animation to an svg line. So far, is not working:( here's my code:
for the Icon that generates the animation:
<div class="hexagon1" onclick="ani()">
<img id="hexagon-icon1" src="images/hexagon-icon1.png"/>
</div>
for the line that I want to animate:
<div id="left-line-animated-container-left">
<img id="animationline" src="images/line-animated.svg">
</div>
the CSS for the animation:
.line-animated {
-webkit-animation-name: cssAnimation;
stroke-dasharray: 800;
stroke-dashoffset: 0;
-webkit-animation: dash 5s ease ;
-o-animation: dash 5s ease ;
-moz-animation: dash 5s ease ;
animation: dash 5s ease ;
display: block;
}
#-webkit-keyframes cssAnimation {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
and my JAVASCRIPT:
function ani(){
document.getElementById('animationline').className ='line-animated';
}
Any suggestion:)? thanks!

SVG and CSS3 Animations not working in IE and Safari

I have this code for animations using HTML5, CSS3 Animations and SVG
line. It’s only working in Chrome, Opera and Firefox and not working
in IE and Safari. Any solution?
Here is the code:
.line {
width: 65%;
margin: 0 auto;
}
#svg path.path {
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation: lines 5s linear forwards;
-moz-animation: lines 5s linear forwards;
-ms-animation: lines 5s linear forwards;
-0-animation: lines 5s linear forwards;
animation: lines 5s linear forwards;
}
#keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
See the code in "Code Pen"
I want fix it by making it work in IE and Safari. Please, if possible
in HTML5, CSS and SVG only.

Mozilla Devloper Network - SVG Animation - Browser Compatibility says
Internet Explorer
Not supported
Then use FakeSMIL
Refer this FakeSmile with IE9
Refer this http://jsfiddle.net/whyoz/c3wb5sbr/
function registerAnimation(anim) {
var targets = getTargets(anim);
var elAnimators = new Array();
for(var i=0; i<targets.length ;i++) {
var target = targets[i];
var animator = new Animator(anim, target, i);
animators.push(animator);
elAnimators[i] = animator;
}
anim.animators = elAnimators;
var id = anim.getAttribute("id");
if (id)
id2anim[id] = anim;
for(var i=0; i<elAnimators.length ;i++)
elAnimators[i].register();
}
var svg = document.getElementsByTagName('svg')[0];
.......
var animation = document.createElementNS(
"http://www.w3.org/2000/svg", "animate");
.......
.......
registerAnimation(animation);
animation.beginElement();
Which could bring animation for SVG in IE
Refer MSDN https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx
Example http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/06seventeenGearsWith1Button.html

SVG pattern animation and background fade in issue

I am trying to animate an SVG pattern and, once this has finished, to make a background image fading in.
Each of the two effect works fine separately. But when I combine them it looks like the timing is wrong.
I think the actual issue is the SVG being inside the div with opacity:0. This is used to make the background colour fade in, but it means that the SVG isn't not visible straight away.
Is a CSS only solution possible? Or do I need Javascript? And if so, could people make suggestion?
I have simplified the scenario by using a background colour instead of an image.
DEMO
HTML
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>
CSS
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
}
.background-image.visible {
opacity: 1;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}

You can use a pseudo-element on the background-image div to "underly" the SVG.
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
position: relative;
}
.background-image::before {
content:"";
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
z-index:0;
}
.background-image.visible {
opacity: 1;
}
svg {
position: relative;
z-index:2;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>