Greensock animation not working on SVG height - javascript

I just wanted to do a very simple tweenMax animation, where the height of the bar goes from "0" to "100%". Now my SVG looks like below:
<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 69 64" style="enable-background:new 0 0 69 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:#712215;}
.st1{fill:none;stroke:#712215;stroke-miterlimit:10;}
</style>
<path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z"/>
<path id="XMLID_7_" class="st0" d="M31.9,47.4h-5.4c-0.5,0-1-0.5-1-1V32.9c0-0.5,0.5-1,1-1h5.4c0.6,0,1,0.5,1,1v13.5
C32.9,47,32.5,47.4,31.9,47.4z"/>
<path id="XMLID_6_" class="st0" d="M41.9,47.4h-5.4c-0.6,0-1-0.5-1-1V36c0-0.5,0.4-1,1-1h5.4c0.5,0,1,0.5,1,1v10.5
C42.9,47,42.5,47.4,41.9,47.4z"/>
<path id="XMLID_5_" class="st0" d="M51,47.4h-5.4c-0.5,0-1-0.5-1-1V30c0-0.5,0.5-1,1-1H51c0.6,0,1,0.5,1,1v16.4
C52,47,51.5,47.4,51,47.4z"/>
<polygon id="XMLID_4_" class="st0" points="16.6,35 18,36.4 29.6,25.6 38.9,33 49.3,21.9 47.3,20 38.9,29.5 29.2,21.8 15.9,34.5 "/>
<polygon id="XMLID_3_" class="st0" points="43.2,17.8 51.7,17.9 51.9,26 "/>
<rect id="XMLID_2_" x="2.5" y="11.6" class="st1" width="63.5" height="40.8"/>
</svg>
Fiddle here. Now I have the following JavaScript to animate the bars:
$(function () {
var tx = new TimelineMax();
TweenMax.fromTo($('path')[0] , 2 , { css : { height : 0 } } , { css : { height : '100px' } });
});
But the height animation doesn't seem to be working. What am I doing wrong?


The problem is that height isn't an attribute supported by the path element;
an easy fix would be using transform:scaleY :
TweenMax.fromTo($('path')[0], 2, {
css: {
transform: 'scaleY(0)'
// height: 0
}
}, {
css: {
transform: 'scaleY(1)'
//height: '100px'
}
});
fiddle
For a more customized solution you might look into changing the d attribute...


Usually I'd use clipPath and move the entire bar to top. See fiddle
<clipPath id="myClip">
<path d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z" />
</clipPath>
<g clip-path="url(#myClip)">
<g id="path0" transform="translate(0 10)">
<path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z" />
</g>
</g>

Related

SVG Glow Effect in CSS / JS / Jquery

I have a question regarding SVG Glow effect. I would like to set glow to group "suteki_201_" similar to the RED effect in this link: https://codepen.io/FelixRilling/pen/qzfoc (I would like his eyes to neon glow - blink animation in different color) i tried using different styles but no success... could you please help?
My code for SVG image is:
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_">
<g id="suteki_276_" class="dane8">
<path id="suteki_65_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>
Thank you for your time!!!

Here is my solution, Its not perfect, but you can play with the colors,opacity and timings.
To get the blur efects, I added Gaussian blur to svg
More info on Gauusian Blur effect here here
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
Then, to apply the blur to any path / g add filter="url(#f1)".
Notice the id: ( f1 )
I had to apply the filter to suteki_65_ to make the outer circle glow and also had to duplicate the circle in order to retain the shape of the eye, as the filter effect blurs the shape.
And finally I applied CSS animation, to suteki_65_ in order to make it blink
by changing the opacity.
#keyframes blink {
0% {
opacity: 1;
fill:red;
}
25% {
opacity: 0.5;
fill:pink;
}
50% {
opacity: 1;
fill:orange;
}
75% {
opacity: 0.5;
fill:blue;
}
100% {
opacity:1;
fill:yellow;
}
}
#suteki_65_ {
animation: blink 1500ms infinite;
}
#suteki_65a_ {
opacity: 0.3;
}
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_" >
<g id="suteki_276_" class="dane8">
<path id="suteki_65a_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
<path id="suteki_65_" filter="url(#f1)" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>

Complex filled SVG animation

I need to animate the logo like so:
Here is its SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve" id="mylogo">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<g id="cap_arch_connector_vert">
<path class="st0" d="M333.7,195.4c-5.4,0-10.7,0.4-16,1v39.3c5.2-0.8,10.6-1.2,16-1.2h16v-39.1H333.7z"/>
</g>
<g id="cap_bottom_arch">
<path class="st0" d="M333.7,231c-56.4,0-103.2,41.8-111,96.1v0h32.5c7.4-36.5,39.8-64.1,78.5-64.1h65.2l10.4-32H333.7z"/>
</g>
<g id="arched_line_right">
<path class="st0" d="M641.9,570l-23,23c18.7,14,42,22.3,67.1,22.3c5.4,0,10.8-0.4,16-1.1v-32.5c-5.2,1.1-10.5,1.6-16,1.6
C669.7,583.3,654.5,578.4,641.9,570z"/>
</g>
<g id="right_leg_line_1">
<path class="st0" d="M702,646.4c-5.3,0.6-10.6,0.9-16,0.9c-79.5,0-144.1-64.7-144.1-144.1l0.3-272.2h-32l-0.3,272.2
c0,97.1,79,176.1,176.1,176.1c5.4,0,10.7-0.3,16-0.8V646.4z"/>
</g>
<g id="arch_under_circle">
<path class="st0" d="M203.3,615.3c24.8,0,48.2-8.2,67.1-22.3l-23-23c-12.8,8.4-28,13.3-44.1,13.3c-26.1,0-49.4-12.6-64-32H102
C120,589.1,158.7,615.3,203.3,615.3z"/>
</g>
<g id="circle">
<path class="st0" d="M203.3,551.3c-26.5,0-48-21.6-48-48s21.5-48,48-48s48,21.6,48,48S229.8,551.3,203.3,551.3z M203.3,487.2
c-8.8,0-16,7.2-16,16c0,8.8,7.2,16,16,16s16-7.2,16-16C219.3,494.4,212.1,487.2,203.3,487.2z"/>
</g>
<g id="line_to_circle">
<path class="st0" d="M27.9,487.2c-0.5,5.3-0.7,10.6-0.7,16c0,5.4,0.3,10.7,0.8,16h145.7v-32H27.9z"/>
</g>
<g id="leg_connector">
<path class="st0" d="M297,529l-13.5-13.5l-4.3,13.2c-2.3,6.7-5.4,12.9-9.1,18.6l12.4,12.4v0l34,34l0,0l7.6,7.6l22.4-22.9L297,529z"
/>
</g>
<g id="arch_connector">
<path class="st0" d="M277.8,600.3l-7.4-7.4l0,0l-6-6l-3.8-3.8l0,0L247.4,570c-9.8,6.4-20.9,10.8-32.8,12.5l26.3,26.3l38.4,38.4
l22.4-22.9L277.8,600.3z"/>
</g>
<g id="cap_mid-bottom_parallel_line">
<polygon class="st0" points="542.2,231 443,231 432.6,263 542.1,263 "/>
</g>
<g id="arch_connector_very_right">
<path class="st0" d="M686,583.3c-5.5,0-10.8-0.6-16-1.6v19.4v13.1v32.3v18.7v13.5c5.3,0.5,10.6,0.8,16,0.8s10.7-0.3,16-0.8v-13.5
v-18.7v-32.3v-13.1v-19.4C696.8,582.7,691.5,583.3,686,583.3z"/>
</g>
<g id="arch_connector_right">
<path class="st0" d="M674.7,582.5c-12-1.7-23.1-6.1-32.8-12.5l-13.1,13.1l-9,9l-24.4,24.4L584,626.6l25.9,20.7l49.4-49.4
L674.7,582.5z"/>
</g>
<g id="right_leg_connector">
<path class="st0" d="M619.2,547.3c-6.4-9.7-10.8-20.8-12.5-32.8l-26.3,26.3v0l-30.7,30.7l20.9,24.1l2.2-1.8l27.8-27.8L619.2,547.3z
"/>
</g>
<g id="cap_arch_connector_hor">
<path class="st0" d="M246.2,295.1h-48.4h-30.1h-3.5c-2.9,10.3-5,21-5.9,32h0.3l9.2,0v0h55h32.5c2.4-11.8,7.5-22.7,14.5-32H246.2z"
/>
</g>
<g id="cap_top_arch">
<path class="st0" d="M333.7,166.9c-91.7,0-167.3,70.5-175.4,160.2l32.2,0c7.4-66.7,60.5-119.8,127.2-127.2v0.1c5.3-0.6,10.6-1,16-1
h16v-25.2v-6.8H333.7z"/>
</g>
<g id="left_leg_line_1">
<path class="st0" d="M309.6,538.8L409.3,231h-33.7l-96.4,297.7c-2.3,6.7-5.4,12.9-9.1,18.6l23,23
C300.1,561,305.7,550.3,309.6,538.8z"/>
</g>
<g id="left_leg_line_2">
<path class="st0" d="M443,231L340,548.8c-19.8,58.9-74.7,98.5-136.8,98.5c-79.5,0-144.1-64.7-144.1-144.1c0-5.4,0.3-10.7,0.9-16
H27.9c-0.5,5.3-0.7,10.6-0.7,16c0,97.1,79,176.1,176.1,176.1c75.8,0,142.9-48.4,167.2-120.5L476.6,231H443z"/>
</g>
<g id="right_leg_line_2">
<path class="st0" d="M619.2,547.3c-8.4-12.6-13.3-27.8-13.3-44.1l0.3-272.3h-32l-0.3,272.3c0,25.1,8.3,48.4,22.3,67.1L619.2,547.3z
"/>
</g>
<g id="cap_top_parallel_line">
<polygon class="st0" points="728.8,199 718.4,166.9 684.8,166.9 381.7,166.9 381.7,199 695.2,199 "/>
</g>
<g id="cap_bottom_parallel_line">
<polygon class="st0" points="739.2,231 732.3,231 705.5,231 574.2,231 574.2,263 715.9,263 749.6,263 "/>
</g>
<g id="right_cap_corner">
<polygon class="st0" points="749.6,263 739.2,231 739.2,231 728.8,199 728.8,199 718.4,166.9 684.8,166.9 714.2,257.7 714.2,257.7
715.9,263 "/>
</g>
</svg>
I spend a lot of time looking for a solution but mostly I stumbled upon stroke SVG animations. Vivus.js looked like a good solution but it doesn't animate filled path, it works only with stroke. So does pretty much all examples I have found, like DrawSVG etc.
I broke down my SVG into simple elements so it would be easier to animate them. I suppose I have to use some SVG masks as I can't change the existing shape of the logo by applying stroke etc. The only animation that looks similar to mine is on Codepen. SVG code is pretty complicated there and I'm not sure whether the way it was animated there will solve my problem.
How can I animate the logo?

As the comments have suggested it would be advisable to convert the graphic from shapes to to strokes and then use an animation library such as Anime JS or Greensock to perform the animation.
Conversion to strokes
For the conversion to strokes I used Illustrator, and then exported to SVG before optimizing the graphic with Jake Archibald's SVGOMG.
Animation example
I chose the Anime JS library for the animation - see the snippet below.
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: [0.550, 0.055, 0.100, 1.000],
duration: 1500,
delay: 1200,
direction:'forwards'
});
svg {
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
<svg id="mylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><style>.st0{fill:none;stroke:#231f20;stroke-width:34;stroke-miterlimit:10}</style><path class="st0" d="M382 183.1h324l21 64H589.5v245.5s-2.5 22.5 10 48l-47 51.5s33 62.5 132 73v-61.5l-21.6-2.5-19.4-6.5-43.8 41.3"/><path class="st0" d="M552.5 592.1s-25.5-36-25.5-106v-237h-71.5l-105 315s-10.6 49-74.2 81.8C184 693.6 88 634.6 67.7 592.6c-23.3-32-26.7-88-26.7-88h130.3c-.2-7.4 2.1-14.9 7.1-21.2 11.1-13.7 31.3-15.9 45-4.8s15.9 31.3 4.8 45c-11.1 13.7-31.3 15.9-45 4.8-7.5-6.1-11.5-14.8-11.9-23.7"/><path d="M125.7 561.9s42.7 58.3 117.7 29l44.7 43" fill="none" stroke="#231f20" stroke-width="34" stroke-linecap="square" stroke-miterlimit="10"/><path class="st0" d="M335.7 589.2l-47.3-46 5.3-9.3L386 248.6l-50.5-1.3-3.2-.1c-62-2-90 64.7-90 64.7h-68c42-134 157.3-128 157.3-128l.7 61.9"/><path fill="#fff" d="M92.7 536.2h54v22.7h-54z"/></svg>
Any further questions related to the graphic itself would be better on graphic design StackExchange.

jQuery / CSS - setInterval initial state issue

I made a little slide-show box thing that has an animated timer bar that resets each time the slide changes - you can see it working here: https://codepen.io/JTBennett/pen/JJzZqK
My issue is that the initial state of the first slide has its opacity set to 0, but I would like it to be visible from the start. I've tried setting the css just for that slide to opacity:1, but then it remains visible throughout the entire cycle for some reason.
I also tried to adjust the start of the loop, but it cuts out the previous slide entirely then.
I'm going to post just the javascript here because (I know it's spaghetti, I suck), but it may be easier to understand if you look at it in action on the codepen.
How can I make the initial opacity of the first slide 1 without it remaining throughout the loop?
$(document).ready(function(){
setInterval(function() {
$('.sb-1-bot > div:first')
.removeClass('sb-active')
.next()
.addClass('sb-active')
.end()
.appendTo('.sb-1-bot');
var all = $('.sb-1-icon svg');
var query1 = $('.sb-pg-1').css('opacity');
var icon1 = $('.sb-ic-1 svg');
var query2 = $('.sb-pg-2').css('opacity');
var icon2 = $('.sb-ic-2 svg');
var query3 = $('.sb-pg-3').css('opacity');
var icon3 = $('.sb-ic-3 svg');
var query4 = $('.sb-pg-4').css('opacity');
var icon4 = $('.sb-ic-4 svg');
var query5 = $('.sb-pg-5').css('opacity');
var icon5 = $('.sb-ic-5 svg');
if(query1 == 1) {
all.css('opacity','0');
icon1.css('opacity','1');
}
if(query2 == 1) {
all.css('opacity','0');
icon2.css('opacity','1');
}
if(query3 == 1) {
all.css('opacity','0');
icon3.css('opacity','1');
}
if(query4 == 1) {
all.css('opacity','0');
icon4.css('opacity','1');
}
if(query5 == 1) {
all.css('opacity','0');
icon5.css('opacity','1');
}
var bar = $('.sb-pg-timer');
var origin = 0;
bar.animate({
'width': origin,
}, 0,function(){
$(this).animate({
'width' : '100%',
}, 10000, function() {
$(this).animate({
'width': origin,
}, 0)
})});
}, 10000);
});

You don't want to set the opacity as the default state but you want to set the sb-active class as the default class for sb-pg-1 div.
$(document).ready(function() {
$(".sb-pg-1").addClass("sb-active");
setInterval(function() {
$(".sb-1-bot > div:first")
.removeClass("sb-active")
.next()
.addClass("sb-active")
.end()
.appendTo(".sb-1-bot");
var all = $(".sb-1-icon svg");
var query1 = $(".sb-pg-1").css("opacity");
var icon1 = $(".sb-ic-1 svg");
var query2 = $(".sb-pg-2").css("opacity");
var icon2 = $(".sb-ic-2 svg");
var query3 = $(".sb-pg-3").css("opacity");
var icon3 = $(".sb-ic-3 svg");
var query4 = $(".sb-pg-4").css("opacity");
var icon4 = $(".sb-ic-4 svg");
var query5 = $(".sb-pg-5").css("opacity");
var icon5 = $(".sb-ic-5 svg");
if (query1 == 1) {
all.css("opacity", "0");
icon1.css("opacity", "1");
}
if (query2 == 1) {
all.css("opacity", "0");
icon2.css("opacity", "1");
}
if (query3 == 1) {
all.css("opacity", "0");
icon3.css("opacity", "1");
}
if (query4 == 1) {
all.css("opacity", "0");
icon4.css("opacity", "1");
}
if (query5 == 1) {
all.css("opacity", "0");
icon5.css("opacity", "1");
}
var bar = $(".sb-pg-timer");
var origin = 0;
bar.animate(
{
width: origin
},
0,
function() {
$(this).animate(
{
width: "100%"
},
3000,
function() {
$(this).animate(
{
width: origin
},
0
);
}
);
}
);
}, 3000);
});
/*deleteme*/
body {font-family: 'Open Sans', sans-serif;color:#333;foont-size:12px;margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Oxygen', sans-serif;font-weight:300;letter-spacing:1px;color:#222;}
p {font-style:italic;}
/*deleteme*/
.sb-1-icon svg {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.sb-1 {margin:0;padding:0;}
.sb-1-top {
display:flex;
width:100%;
height:120px;
}
.sb-1-icon {
background:#fff;
padding:14px;
width:50px;
height:50px;
border:1px #ddd solid;
border-radius:50%;
margin:auto;
}
.sb-1-icon svg {opacity:0;}
.sb-ic-1 svg {opacity:1;}
.sb-1-line-2 {
position:absolute;
height:2px;
width:100%;
top:68px;
z-index:-1;
}
.divider {
position: relative;
height: 1px;
}
.div-transparent:before {
content: "";
position: absolute;
top: 0;
left: 5%;
right: 5%;
width: 90%;
height: 1px;
background-image: linear-gradient(to right, transparent, #ddd, transparent);
}
.sb-1-bot {
height:200px;
text-align:center;
}
.sb-page {
position:absolute; width:100%; height:100%;opacity:0;}
.sb-active {opacity:1;}
.sb-pg-timer {
width:0%;
height:3px;
float:left;
background:#f00;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sb-1">
<div class="sb-1-top">
<div class="sb-1-line-2">
<div class="divider div-transparent"></div>
</div>
<div class="sb-1-icon sb-ic-1">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:#C9C9C9;" cx="253.04" cy="50.24" r="50.24"/>
<g>
<path style="fill:#002833;" d="M250.72,217.2L202.16,112c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S251.04,217.2,250.72,217.2z"
/>
<path style="fill:#002833;" d="M255.44,217.2L304,112c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S255.12,217.2,255.44,217.2z"/>
</g>
<polygon style="fill:#FF5F5F;" points="253.04,112 218.08,112 253.04,189.36 288,112 "/>
<circle style="fill:#C9C9C9;" cx="407.04" cy="345.04" r="50.24"/>
<g>
<path style="fill:#002833;" d="M404.64,512l-48.56-105.2c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S404.96,512,404.64,512z"/>
<path style="fill:#002833;" d="M409.36,512l48.56-105.2c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S409.04,512,409.36,512z"/>
</g>
<polygon style="fill:#FF5F5F;" points="407.04,406.8 372.08,406.8 407.04,484.16 442,406.8 "/>
<circle style="fill:#C9C9C9;" cx="104.96" cy="345.04" r="50.24"/>
<g>
<path style="fill:#002833;" d="M102.64,512L54.08,406.8c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S102.96,512,102.64,512z"/>
<path style="fill:#002833;" d="M107.36,512l48.56-105.2c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S107.04,512,107.36,512z"/>
</g>
<polygon style="fill:#FF5F5F;" points="104.96,406.8 70,406.8 104.96,484.16 139.92,406.8 "/>
</svg>
</div>
<div class="sb-1-icon sb-ic-2">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<rect x="251.28" y="28.4" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M260.72,455.28h-9.44v-18.96h9.44V455.28z M260.72,417.28h-9.44v-18.96h9.44V417.28z M260.72,379.36
h-9.44V360.4h9.44V379.36z M260.72,341.44h-9.44v-18.96h9.44V341.44z M260.72,303.44h-9.44v-18.96h9.44V303.44z M260.72,265.52
h-9.44v-18.96h9.44V265.52z M260.72,227.6h-9.44v-18.96h9.44V227.6z M260.72,189.6h-9.44v-18.96h9.44V189.6z M260.72,151.68h-9.44
v-18.96h9.44V151.68z M260.72,113.76h-9.44V94.8h9.44V113.76z M260.72,75.76h-9.44V56.8h9.44V75.76z"/>
<rect x="251.28" y="474.24" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<rect x="452.96" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M462.48,335.28h-9.44v-19.52h9.44V335.28z M462.48,296.24h-9.44v-19.52h9.44V296.24z M462.48,257.2
h-9.44v-19.52h9.44V257.2z M462.48,218.16h-9.44v-19.52h9.44V218.16z M462.48,179.04h-9.44v-19.52h9.44V179.04z"/>
<rect x="452.96" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M256,262.96l-8.72-5.28l4.88-8.08l3.84,2.32l7.44-4.48l4.88,8.08L256,262.96z M231.04,247.92
l-16.16-9.76l4.88-8.08l16.16,9.76L231.04,247.92z M284.56,245.68l-4.88-8.08l16.16-9.76l4.88,8.08L284.56,245.68z M198.72,228.32
l-16.16-9.76l4.88-8.08l16.16,9.76L198.72,228.32z M316.96,226.16l-4.96-8.08l16.16-9.76l4.88,8.08L316.96,226.16z M166.32,208.8
l-16.16-9.76l4.88-8.08l16.16,9.76L166.32,208.8z M349.28,206.64l-4.88-8.08l16.16-9.76l4.88,8.08L349.28,206.64z M133.92,189.28
l-16.16-9.76l4.88-8.08l16.16,9.76L133.92,189.28z M381.68,187.04l-4.88-8.08l16.16-9.76l4.88,8.08L381.68,187.04z M101.52,169.68
l-16.16-9.76l4.88-8.08l16.16,9.76L101.52,169.68z M414.08,167.52l-4.88-8.08l16.16-9.76l4.88,8.08L414.08,167.52z M69.2,150.16
l-16.16-9.76l2-3.36l-2.96-5.52l16.72-8.88l4.4,8.32l-9.36,4.96L74,142.08L69.2,150.16z M446.4,148l-4.88-8.08l13.76-8.32l0.72,1.2
l1.44-2.64l9.92,5.28L446.4,148z M436.24,129.6l-16.72-8.88l4.48-8.32l16.72,8.88L436.24,129.6z M89.92,122.08l-4.4-8.32
l16.72-8.88l4.4,8.32L89.92,122.08z M402.88,111.84l-16.72-8.88l4.4-8.32l16.72,8.88L402.88,111.84z M123.28,104.32l-4.4-8.32
l16.72-8.88l4.4,8.32L123.28,104.32z M369.44,94.16l-16.72-8.88l4.4-8.32l16.72,8.88L369.44,94.16z M156.72,86.64l-4.4-8.32
l16.72-8.88l4.4,8.32L156.72,86.64z M336,76.4l-16.72-8.88l4.4-8.32l16.72,8.88L336,76.4z M190.16,68.88l-4.4-8.32l16.72-8.88
l4.4,8.32L190.16,68.88z M302.64,58.64l-16.72-8.88l4.4-8.32l16.72,8.88L302.64,58.64z M223.52,51.12l-4.4-8.32l16.72-8.88
l4.4,8.32L223.52,51.12z M269.2,40.96l-15.44-8.16l1.44-2.64l-2.64-5.04L256,23.2l17.68,9.36L269.2,40.96z"/>
<path style="fill:#C9C9C9;" d="M256,491.76l-8.72-5.28l4.88-8.08l3.84,2.32l7.44-4.48l4.88,8.08L256,491.76z M231.04,476.72
l-16.16-9.76l4.88-8.08l16.16,9.76L231.04,476.72z M284.56,474.56l-4.88-8.08l16.16-9.76l4.88,8.08L284.56,474.56z M198.72,457.2
l-16.16-9.76l4.88-8.08l16.16,9.76L198.72,457.2z M316.88,454.96l-4.88-8.08l16.16-9.76l4.88,8.08L316.88,454.96z M166.32,437.6
l-16.16-9.76l4.88-8.08l16.16,9.76L166.32,437.6z M349.28,435.44l-4.88-8.08l16.16-9.76l4.88,8.08L349.28,435.44z M133.92,418.08
l-16.16-9.76l4.88-8.08L138.8,410L133.92,418.08z M381.68,415.92l-4.88-8.08l16.16-9.76l4.88,8.08L381.68,415.92z M101.52,398.56
l-16.16-9.76l4.88-8.08l16.16,9.76L101.52,398.56z M414.08,396.4l-4.88-8.08l16.16-9.76l4.88,8.08L414.08,396.4z M69.12,378.96
l-16.16-9.76l2-3.36L52,360.32l16.72-8.88l4.4,8.32l-9.36,4.96l10.16,6.16L69.12,378.96z M446.4,376.8l-4.88-8.08l13.76-8.32
l0.72,1.2l1.44-2.64l9.92,5.28L446.4,376.8z M436.24,358.48l-16.72-8.88l4.48-8.4l16.72,8.88L436.24,358.48z M89.92,350.96
l-4.4-8.32l16.72-8.88l4.4,8.32L89.92,350.96z M402.88,340.72l-16.72-8.88l4.4-8.32l16.72,8.88L402.88,340.72z M123.28,333.2
l-4.4-8.32L135.6,316l4.4,8.32L123.28,333.2z M369.44,322.96l-16.72-8.88l4.4-8.32l16.72,8.88L369.44,322.96z M156.72,315.44
l-4.4-8.32l16.72-8.88l4.4,8.32L156.72,315.44z M336.08,305.28l-16.72-8.88l4.4-8.4l16.72,8.88L336.08,305.28z M190.16,297.76
l-4.4-8.32l16.72-8.88l4.4,8.32L190.16,297.76z M302.64,287.52l-16.72-8.88l4.4-8.32l16.72,8.88L302.64,287.52z M223.52,280
l-4.4-8.32l16.72-8.88l4.4,8.32L223.52,280z M269.2,269.76l-15.44-8.16l1.44-2.64l-2.64-5.04l3.44-1.84l17.68,9.36L269.2,269.76z"
/>
</g>
<g>
<circle style="fill:#FF5F5F;" cx="457.76" cy="131.04" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="457.76" cy="364.48" r="25.76"/>
</g>
<g>
<rect x="49.52" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M59.04,335.28h-9.52v-19.52h9.44v19.52H59.04z M59.04,296.24h-9.52v-19.52h9.44v19.52H59.04z
M59.04,257.2h-9.52v-19.52h9.44v19.52H59.04z M59.04,218.16h-9.52v-19.52h9.44v19.52H59.04z M59.04,179.04h-9.52v-19.52h9.44
v19.52H59.04z"/>
<rect x="49.52" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
</g>
<g>
<circle style="fill:#FF5F5F;" cx="54.24" cy="131.04" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="54.24" cy="364.48" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="256" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="25.76" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="486.24" r="25.76"/>
</g>
</svg>
</div>
<div class="sb-1-icon sb-ic-3">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#002833;" points="389.68,502.08 261.36,393.52 132.96,502.08 112.32,477.68 261.36,351.6 410.32,477.68 "/>
<rect x="21.36" y="30.72" style="fill:#8AD5DD;" width="469.36" height="341.84"/>
<g>
<rect y="9.92" style="fill:#002833;" width="512" height="21.36"/>
<rect y="372.56" style="fill:#002833;" width="512" height="21.36"/>
<rect x="165.36" y="452.56" style="fill:#002833;" width="192" height="10.64"/>
</g>
<g>
<path style="fill:#FFFFFF;" d="M99.12,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L180.96,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.4c-1.84,9.04-4.16,16.8-6.8,24.88l-12.16,35.76h-12.4L85.12,164L99.12,164
L99.12,164z"/>
<path style="fill:#FFFFFF;" d="M215.36,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L297.2,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.32c-1.84,9.04-4.16,16.8-6.8,24.88l-12.16,35.76h-12.4L201.44,164
L215.36,164L215.36,164z"/>
<path style="fill:#FFFFFF;" d="M331.6,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L413.44,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.32c-1.84,9.04-4.16,16.8-6.8,24.88L352.8,239.2h-12.4L317.68,164L331.6,164
L331.6,164z"/>
</g>
</svg>
</div>
<div class="sb-1-icon sb-ic-4">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<polygon style="fill:#FF5F5F;" points="431.12,512 382.8,463.68 448.8,397.68 498.16,447.04 "/>
<rect x="341.617" y="351.998" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 881.5287 386.2147)" style="fill:#FF5F5F;" width="38.32" height="47.36"/>
</g>
<g>
<rect x="350.007" y="384.51" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 968.1555 422.1568)" style="fill:#002833;" width="93.279" height="54.159"/>
<circle style="fill:#002833;" cx="219.6" cy="205.76" r="205.76"/>
</g>
<circle style="fill:#EFEFEF;" cx="219.6" cy="205.76" r="184.24"/>
<rect x="140.88" y="201.28" style="fill:#FF5F5F;" width="26.24" height="71.76"/>
<g>
<rect x="97.2" y="230.56" style="fill:#8AD5DD;" width="26.24" height="42.4"/>
<rect x="184.64" y="161.36" style="fill:#8AD5DD;" width="26.24" height="111.6"/>
</g>
<rect x="228.32" y="89.6" style="fill:#FF5F5F;" width="26.24" height="183.36"/>
<rect x="272.08" y="126.64" style="fill:#8AD5DD;" width="26.24" height="146.4"/>
<rect x="315.76" y="185.6" style="fill:#FF5F5F;" width="26.24" height="87.68"/>
</svg>
</div>
<div class="sb-1-icon sb-ic-5">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#002833;" d="M0,355.28V31.36c0-5.76,4.72-10.48,10.48-10.48H501.6c5.68,0,10.4,4.72,10.4,10.48v323.92"/>
<g>
<path style="fill:#E8E8E8;" d="M512,355.28v41.76c0,5.76-4.72,10.48-10.48,10.48H10.48C4.72,407.52,0,402.8,0,397.04v-41.76H512z"
/>
<rect x="146.32" y="480.64" style="fill:#E8E8E8;" width="219.44" height="10.48"/>
</g>
<polygon style="fill:#C9C9C9;" points="329.12,480.64 182.88,480.64 193.28,407.52 318.72,407.52 "/>
<rect x="20.88" y="41.76" style="fill:#EFEFEF;" width="470.24" height="292.56"/>
<circle style="fill:#C9C9C9;" cx="167.28" cy="145.84" r="36.32"/>
<g>
<path style="fill:#002833;" d="M165.6,266.64l-35.12-76.08c0,0-36.8,0.48-36.8,34.32s0,41.68,0,41.68S165.84,266.64,165.6,266.64z"
/>
<path style="fill:#002833;" d="M169.04,266.64l35.12-76.08c0,0,36.8,0.48,36.8,34.32s0,41.68,0,41.68S168.72,266.64,169.04,266.64z
"/>
</g>
<polygon style="fill:#FF5F5F;" points="167.28,190.56 142,190.56 167.28,246.48 192.56,190.56 "/>
<g>
<rect x="282.48" y="135.84" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="167.2" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="198.56" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="229.84" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
</g>
</svg>
</div>
</div>
<div class="sb-1-bot">
<div class="sb-page sb-pg-1">
<h2>Dedicated Team</h2>
<p>All of our editors are experienced SEO & content professionals. We build our strategy around your goals and function as an extension of your company.</p>
</div>
<div class="sb-page sb-pg-2">
<h2>Market Research</h2>
<p>We learn about every facet of your industry and competitor strategies to make sure your brand can connect with your target markets first. We go the extra mile by taking advantage of new market opportunities.</p>
</div>
<div class="sb-page sb-pg-3">
<h2>Proven Strategy</h2>
<p>We know what works and what doesn’t. By staying on top of Google’s algorithm updates and using time-tested methods, we can create interesting evergreen content with continuously growing traffic.</p>
</div>
<div class="sb-page sb-pg-4">
<h2>SEO</h2>
<p>We go the extra mile by restructuring and optimizing your site. We also have extensive off-page resources to ensure your content ranks high.</p>
</div>
<div class="sb-page sb-pg-5">
<h2>Branding & Authority</h2>
<p>We perform extensive research to ensure your content will be contributing to your field rather than just diluting it. Brand awareness will grow significantly, and your status as a trusted source will grow with it.</p>
</div>
</div>
<div class="sb-pg-timer"></div>
</div>
<!---
<div class="sb-1-line-2">
<div class="divider div-transparent"></div>
</div>
-->

You are never changing the opacity on the text portion. You only change the class, adding and removing sb-active.
So, the opacity of the text is determined by the css. If you add opacity to the element, it will override the css.
Instead, add the sb-active class to the element initially.
EDIT:
working example: https://codepen.io/pen/MoRwpq
moved animateBar to a separate function to call initially.
function animateBar()
{
var bar = $('.sb-pg-timer');
var origin = 0;
bar.animate({
'width': origin,
}, 0,function(){
$(this).animate({
'width' : '100%',
}, 3000, function() {
$(this).animate({
'width': origin,
}, 0)
})});
}

Vivus JS doesn't seem to animate certain <path> nodes

I'm playing with the Vivus JS library, which is very cool for animating paths like drawing a picture. Now, I have this SVG icon that should animate to a 100% line-width, but it doesn't seem to work. On other icons in my project it works well.
See this CodePen: http://codepen.io/anon/pen/yOqdbN summarized as follows
<svg xmlns="http://www.w3.org/2000/svg">
<path d="...">
<path d="...">
</svg>
Does anyone know why this is happening? Thank you very much for any help pointing me in the right direction.

Vivus works by animating the strokeDashOffset property of a path which requires that your path has a stroke defined, e.g.
<path d="..." stroke="black">
Note that from your nodes I see that you can achieve better results setting fill="transparent"
var els = document.querySelectorAll('path');
Array.prototype.slice.call(els).forEach(function(el) {
el.setAttribute('stroke', 'black')
el.setAttribute('fill', 'transparent')
})
var SVGcrown = new Vivus('SVGcrown', {
duration: 300,
animTimingFunction: Vivus.EASE_OUT
});
body {
background: #FFF;
}
#SVGcrown {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.js"></script>
<svg id="SVGcrown" enable-background="new 0 0 48 48" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M41.93,38H6.07l-0.251-0.167C2.175,35.413,0,31.363,0,27c0-7.168,5.832-13,13-13c2.069,0,4.128,0.499,5.954,1.442 l-0.918,1.777C16.47,16.41,14.776,16,13,16C6.935,16,2,20.935,2,27c0,3.594,1.744,6.936,4.681,9h34.638 C44.256,33.936,46,30.594,46,27c0-6.065-4.935-11-11-11c-1.778,0-3.473,0.411-5.04,1.222l-0.919-1.775 C30.868,14.5,32.929,14,35,14c7.168,0,13,5.832,13,13c0,4.363-2.175,8.413-5.819,10.833L41.93,38z"
/>
<path d="M42,48H6c-2.611,0-3.978-2.013-3.978-4.001C2.022,42.012,3.389,40,6,40h36c2.611,0,3.978,2.013,3.978,4.001 C45.978,45.988,44.611,48,42,48z M6,42c-1.46,0-1.978,1.077-1.978,1.999C4.022,44.922,4.54,46,6,46h36 c1.46,0,1.978-1.077,1.978-1.999C43.978,43.078,43.46,42,42,42H6z"
/>
<path d="M12.695,32.032c-0.411,0-0.795-0.255-0.942-0.663C11.253,29.97,11,28.5,11,27c0-7.168,5.832-13,13-13s13,5.832,13,13 c0,1.49-0.251,2.952-0.746,4.346c-0.186,0.52-0.76,0.789-1.277,0.607c-0.521-0.185-0.792-0.757-0.608-1.277 C34.788,29.498,35,28.262,35,27c0-6.065-4.935-11-11-11s-11,4.935-11,11c0,1.27,0.214,2.513,0.637,3.695 c0.186,0.521-0.085,1.093-0.605,1.278C12.92,32.014,12.807,32.032,12.695,32.032z"
/>
<path d="M24,12c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S27.309,12,24,12z M24,2c-2.206,0-4,1.794-4,4s1.794,4,4,4 s4-1.794,4-4S26.206,2,24,2z" />
<path d="M29,7H19c-0.552,0-1-0.447-1-1s0.448-1,1-1h10c0.552,0,1,0.447,1,1S29.552,7,29,7z" />
<path d="M24,16c-0.552,0-1-0.447-1-1v-4c0-0.553,0.448-1,1-1s1,0.447,1,1v4C25,15.553,24.552,16,24,16z" />
</svg>

SVG Element, HTML and JavaScript

I'm Creating a SVG elements but I want to make it clickable and change the color of it on click
Here's the code of the elements
<svg version="1.1" x="0px" y="0px" width="960px"
height="560px" viewBox="0 0 960 560" style="disable-background:new 0 0 960 560;" xml:space="preserve">
<g id="Layer_1">
<rect x="95.675" y="35.61" class="st0" width="774.026" height="494.805"/>
</g>
<g id="Layer_2">
<circle class="st1" cx="254.766" cy="144.67" r="68.182"/>
<circle class="st1" cx="474.571" cy="144.67" r="68.182"/>
<circle class="st1" cx="685.766" cy="144.67" r="68.182"/>
<ellipse class="st1" cx="474.571" cy="318.727" rx="167.695" ry="76.623"/>
<circle class="st1" cx="324.748" cy="463.532" r="47.403"/>
<circle class="st1" cx="477.565" cy="463.532" r="47.403"/>
<circle class="st1" cx="624.395" cy="463.532" r="47.403"/>
</g>
</svg>

As an example: changing an element's color on click:
$('#Layer_1').click( function() {
$('#Layer_1').css({ fill: "blue" });
});
You can build you idea from this.
Here is a working example: https://jsfiddle.net/ddan/bcLzp929/1/

Categories

Resources