Develop Reference

Formula to calculate gauge value to draw path for gauge svg

This is my gauge, but I don't know a formula to render value of this gauge. Somebody can help me with this?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="145" viewBox="0 0 200 145">
<defs>
<linearGradient id="b" x1="5.165%" y1="76.151%" y2="75.039%">
<stop offset="0%" stop-color="#E9F1FF"/>
<stop offset="100%" stop-color="#DBE7FF"/>
</linearGradient>
<linearGradient id="c" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
<stop offset="0%" stop-color="#FF8600"/>
<stop offset="100%" stop-color="#FFC86A"/>
</linearGradient>
<path id="a" d="M100 0c55.228 0 100 44.772 100 100 0 15.954-3.736 31.036-10.382 44.418l-17.912-8.906c5.31-10.7 8.294-22.757 8.294-35.512 0-44.183-35.817-80-80-80s-80 35.817-80 80c0 12.843 3.027 24.98 8.405 35.735l-17.912 8.906C3.778 131.204 0 116.043 0 100 0 44.772 44.772 0 100 0z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="c" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="url(#b)" xlink:href="#a"/>
<g stroke="#FFF" stroke-width="5" mask="url(#c)" opacity=".3">
<path d="M99.5 97V0M100.252 97.061L110.392.593M100.16 97.06l21.821-94.513M100.885 97.276l31.58-91.715M100.8 97.241l42.523-87.183M101.465 97.6l51.402-82.26M101.399 97.536l61.044-75.383M101.976 98.025l68.589-68.59M102.463 98.6l75.383-61.043M102.4 98.536l82.26-51.403M102.759 99.199l87.183-42.522M102.725 99.115l91.715-31.58M102.94 99.839l94.513-21.82M102.939 99.747l96.468-10.139M103 100.5h97M102.939 101.253l96.469 10.139M102.94 101.16l94.513 21.821M102.724 101.884l91.715 31.58M102.759 101.8l87.183 42.523M102.399 102.465l82.26 51.402M102.464 102.4l75.383 61.044M101.974 102.975l68.59 68.59M101.4 103.464l61.044 75.383M101.464 103.4l51.402 82.26M100.801 103.76l42.522 87.182M100.884 103.724l31.58 91.716M100.161 103.94l21.82 94.513M100.253 103.939l10.139 96.468M99.5 104v97M98.747 103.939l-10.139 96.468M98.839 103.94l-21.82 94.513M98.116 103.724l-31.58 91.716M98.199 103.76l-42.522 87.182M97.536 103.4l-51.402 82.26M97.6 103.464l-61.044 75.383M97.026 102.975l-68.59 68.59M96.536 102.4l-75.383 61.044M96.601 102.465l-82.26 51.402M96.241 101.8L9.058 144.324M96.276 101.884l-91.715 31.58M96.06 101.16L1.548 122.982M96.061 101.253L-.408 111.392M96 100.5H-1M96.061 99.747L-.407 89.608M96.06 99.839L1.548 78.019M96.275 99.115L4.56 67.535M96.241 99.199L9.058 56.677M96.6 98.536L14.34 47.133M96.537 98.6L21.154 37.558M97.024 98.025l-68.589-68.59M97.601 97.536L36.557 22.153M97.535 97.6L46.133 15.34M98.2 97.241L55.676 10.058M98.115 97.276L66.535 5.56M98.84 97.06L77.018 2.548M98.748 97.061L88.608.593"/>
</g>
</g>
<path fill="none" fill-rule="evenodd" stroke="url(#c)" stroke-width="20" d="M72.705 14.214C36.343 25.773 10 59.81 10 100c0 14.45 3.405 28.105 9.457 40.205"/>
</svg>

As #enxaneta pointed out, you should better use strokes.
To display percentage based value segments on your gauge you will foremost need these attributes:
stroke-dasharray: defines the length of segement
stroke-dashoffset: gives you the ability to move your segment
pathlength: changes the computation values ration applied on the stroke-dash attributes
pathlength="100" show 25/100 – useful, if you're working with percentages (e.g. retrieved by some api)
pathlength="100"
stroke-dashoffset="0"
stroke-dasharray="25 100"
pathlength="12" show 3/12 – really handy if you get 'stepped' integer values
pathlength="12"
stroke-dashoffset="0"
stroke-dasharray="3 12"
MDN: pathLength
Here is a rebuild of you gauge using strokes:
svg{
border:1px solid #ccc;
width:33%
}
.gauge-segment{
transition: 0.3s;
}
svg:hover .gauge-segment{
stroke-dashoffset:-33;
stroke-dasharray: 66 100;
}
<p>Hover will change the gauge segment</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 120">
<defs>
<linearGradient id="gradientBackground" gradientTransform="rotate(30)">
<stop offset="0%" stop-color="#E9F1FF"/>
<stop offset="100%" stop-color="#DBE7FF"/>
</linearGradient>
<linearGradient id="gradientSegment" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
<stop offset="0%" stop-color="#FF8600"/>
<stop offset="100%" stop-color="#FFC86A"/>
</linearGradient>
</defs>
<!-- gauge path -->
<symbol id="stroke">
<path pathlength="100" fill="none" stroke-width="10" d="M55.6,103C52,96.1,50,88.3,50,80
c0-27.6,22.4-50,50-50s50,22.4,50,50c0,8.3-2,16.1-5.6,23"/>
</symbol>
<!-- gauge background -->
<g id="gaugeBackground" >
<use id="gaugeBackgroundColor" href="#stroke" stroke="url(#gradientBackground)"></use>
<use id="gaugeBackgroundDash" href="#stroke" stroke="#E9F1FF" stroke-dashoffset="0" stroke-dasharray="1 1" ></use>
</g>
<!-- percentages -->
<g id="gaugeSegments" >
<use id="segment01" class="gauge-segment" href="#stroke" filter="" stroke="url(#gradientSegment)" stroke-dashoffset="0" stroke-dasharray="33 100"></use>
</g>
</svg>

animate fill of an SVG using anime.js (or will i have to change the fill to be something else ?)

I have an SVG who's stroke i am animating useing anime.js like so:
$(function() {
var lineDrawing = anime({
targets: '#layer1 path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) {
return i * 250
},
direction: 'alternate',
loop: true
});
});
My SVG is below:
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 195.22488 193.54251" version="1.1" id="svg8" inkscape:version="0.92.1 r15371" sodipodi:docname="star.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-99.713793"
inkscape:cy="369.29872"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-to-guides="true"
inkscape:window-width="1366"
inkscape:window-height="705"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-9.3736792,-53.001107)"
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-width="5"
>
<path
sodipodi:type="star"
style="fill:#d4ff2a"
id="path10"
sodipodi:sides="5"
sodipodi:cx="111.125"
sodipodi:cy="155.6369"
sodipodi:r1="97.857147"
sodipodi:r2="48.928574"
sodipodi:arg1="0.81271377"
sodipodi:arg2="1.4410323"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 178.40476,226.69642 -60.94839,-22.54231 -53.122401,37.42824 2.604927,-64.93132 -52.012102,-38.95644 62.558327,-17.58745 20.977149,-61.504647 36.05825,54.061687 64.97669,0.94447 -40.27311,50.99941 z"
inkscape:transform-center-x="3.9129994"
inkscape:transform-center-y="-5.5444732" />
</g>
</svg>
FIDDLE HERE , I went through the doc's and there are examples on how to animate the stroke of an SVG, but what i really want to do is animate the fill of the SVG, I.E. animate the fill from the bottom to up. How do i do this ?
I have gone through the doc's but i don't see much of a clue.
EDIT :- To simplify my question, how exactly would i have to modify my SVG to animate the fill(or maybe i have to modify the fill to be something else) to move from downwards to up ?

you can add a <linear gradient> and animate its <stop>s ( without the library ), check animate svg gradients for more details.
$(function() {
var lineDrawing = anime({
targets: '#layer1 path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) {
return i * 250
},
direction: 'alternate',
loop: true
});
});
.svg__holder {
max-width: 300px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="layer1" width="100%" height="100%" viewBox='0 0 850 800'>
<defs>
<linearGradient id="bottom-to-top" y1="100%" x2="0%" y2="0%">
<stop offset="0" stop-color="rgb(212, 255, 42)">
<animate dur="5s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="5s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path class="path" stroke="#000000" fill="url(#bottom-to-top)" stroke-width="3" opacity="1" d="m 178.40476,226.69642 -60.94839,-22.54231 -53.122401,37.42824 2.604927,-64.93132 -52.012102,-38.95644 62.558327,-17.58745 20.977149,-61.504647 36.05825,54.061687 64.97669,0.94447 -40.27311,50.99941 z" id="svg_1" />
</svg>

The only way I know to do this is to define the background as a pattern instead of using a fill color. I don't know anime.js but I think it should be pretty simple to manipulate the x and y values of the background as well.
Using your jsfiddle:
.. define background:
<defs
id="defs2" />
<pattern id="background" patternUnits="userSpaceOnUse" width="500" height="500" > <rect fill="#0000FF" x="0" y="150" width="500" height="500"> </image> </pattern>
...
</defs>
.. set background:
<path
sodipodi:type="star"
style="fill: url(#background)"
id="path10"
...
</path>
Here is an example: https://jsfiddle.net/z8ok9osg/

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)
})});
}

Change an inline SVG's x and y with ecmascript

I am using an inline SVG in an SVG and have set some default x and y values. When I change them, the inline SVG moves accordingly. I am trying to change it with
var inlineSVG = document.getElementById("inlineSVG");
inlineSVG.style.x = "90";
and that adds style="x:90px;" but that doesn't actually affect the element.
It's weird (in my head) because this works with a rect but not with an svg.
Here is my actual code:
<?xml version='1.0' encoding='UTF-8'?>
<svg width='1000' height='360'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink"
onload='init(evt)'
>
<script type='text/ecmascript'>
function init(event){
var wing1 = document.getElementById("wing1");
wing1.style.x = "90";
}
</script>
<circle cx="200" cy="140" r="5" fill="red" />
<circle cx="220" cy="170" r="5" fill="red" />
<circle cx="180" cy="170" r="5" fill="red" />
<circle cx="220" cy="220" r="5" fill="red" />
<circle cx="180" cy="220" r="5" fill="red" />
<svg id="wing1" x="280" y="100" viewBox="0 0 350 300">
<g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.505" cy="117.813" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.931" cy="117.819" rx="5.862" ry="4.547"/>
</g>
</g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.191" cy="125.538" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.617" cy="125.531" rx="5.861" ry="4.547"/>
</g>
</g>
</g>
<ellipse fill="#E6E7E8" cx="247.244" cy="121.796" rx="20.635" ry="38.017"/>
</svg>
<rect id="square" x="0" y="470" width="50" height="50" fill="#BADA55" style="fill-opacity : 0.5" />
<line x1="0" y1="0" x2="1000" y2="360" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>
<line x1="0" y1="360" x2="1000" y2="0" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>

I tried adding !important to the value but it didn't work ( because I guess it doesn't count it as a valid number? ).
The solution is to directly change the x attribute like so:
selector.setAttribute("attr",val);

animate SVG drawing on path with preserveAspectRatio="none"

I have a SVG drawing (see code snippet 1) for which I want to preserve the aspect ratio, and I want to animate it along a SVG path (see code snippet 2) that I want to fit to my container div with preserveAspectRatio="none".
/* SVG drawing for which aspect ratio should be kept */
svg[id^="robot"]{
width: 90px;
position: absolute;
}
#robot1 [data-rotate]{
-webkit-animation: wheel linear infinite;
-webkit-animation-duration: 5s;
-webkit-transform-origin: 50% 50%;
}
#-webkit-keyframes wheel { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }
.st0{ fill-rule:evenodd;clip-rule:evenodd;fill:#3C5482; }
.st1{ fill-rule:evenodd;clip-rule:evenodd;fill:#A5DFE9; }
.st2{ fill-rule:evenodd;clip-rule:evenodd;fill:#7BC7D4; }
.st3{ fill-rule:evenodd;clip-rule:evenodd;fill:#80C1D3; }
.st4{ fill-rule:evenodd;clip-rule:evenodd;fill:#889BA9; }
.st5{ fill-rule:evenodd;clip-rule:evenodd;fill:#1E3869; }
.st6{ fill:none;stroke:#FEB556;stroke-width:4.479;stroke-miterlimit:10;stroke-dasharray:12.059,12.059; }
.st7{ fill-rule:evenodd;clip-rule:evenodd;fill:#F4918C; }
.st8{ fill-rule:evenodd;clip-rule:evenodd;fill:#F5716C; }
.st9{ fill-rule:evenodd;clip-rule:evenodd;fill:#5F7D95; }
.st10{ fill-rule:evenodd;clip-rule:evenodd;fill:#5F7F94; }
.st11{ fill-rule:evenodd;clip-rule:evenodd;fill:#FEB556; }
.st12{ fill-rule:evenodd;clip-rule:evenodd;fill:#FECC85; }
.st13{ fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF; }
<svg id="robot1" viewBox="0 0 291.996 384.643">
<polygon class="st5" points="145.998,306.264 145.998,208.082 170.532,208.082 170.532,216.893 174.655,216.893 174.655,223.615 170.532,223.615 170.532,226.877 174.655,226.877 174.655,233.615 170.532,233.615 170.532,236.877 174.655,236.877 174.655,243.614 170.532,243.614 170.532,246.877 174.655,246.877 174.655,253.599 170.532,253.599 170.532,256.86 174.655,256.86 174.655,263.598 170.532,263.598 170.532,266.859 174.655,266.859 174.655,273.598 170.532,273.598 170.532,306.264 "/>
<polygon class="st0" points="145.998,306.264 145.998,208.082 121.457,208.082 121.457,216.893 117.326,216.893 117.326,223.615 121.457,223.615 121.457,226.877 117.326,226.877 117.326,233.615 121.457,233.615 121.457,236.877 117.326,236.877 117.326,243.614 121.457,243.614 121.457,246.877 117.326,246.877 117.326,253.599 121.457,253.599 121.457,256.86 117.326,256.86 117.326,263.598 121.457,263.598 121.457,266.859 117.326,266.859 117.326,273.598 121.457,273.598 121.457,306.264 "/>
<rect x="145.998" y="133.193" class="st11" width="54.311" height="80.666"/>
<rect x="91.688" y="133.193" class="st12" width="54.311" height="80.666"/>
<rect x="17.309" y="88.12" class="st11" width="257.371" height="15.03"/>
<path class="st2" d="M145.998,191.254V0c52.802,0.015,95.619,42.818,95.619,95.635C241.617,148.437,198.8,191.254,145.998,191.254z"/>
<path class="st1" d="M145.998,191.254V0C93.181,0.015,50.371,42.818,50.371,95.635C50.371,148.437,93.181,191.254,145.998,191.254z"/>
<path class="st13" d="M145.998,45.852c27.498,0,49.784,22.285,49.784,49.783c0,27.483-22.286,49.769-49.784,49.769c-27.491,0-49.776-22.285-49.776-49.769C96.222,68.137,118.507,45.852,145.998,45.852z"/>
<path class="st11" d="M145.998,62.451c18.322,0,33.185,14.846,33.185,33.184c0,18.322-14.862,33.184-33.185,33.184c-18.33,0-33.184-14.861-33.184-33.184C112.814,77.297,127.668,62.451,145.998,62.451z"/>
<path class="st5" d="M145.998,72.131c12.979,0,23.505,10.518,23.505,23.504c0,12.973-10.525,23.505-23.505,23.505s-23.505-10.532-23.505-23.505C122.493,82.648,133.019,72.131,145.998,72.131z"/>
<path class="st10" data-rotate d="M203.43,326.652c0.059-1.068,0.095-2.143,0.095-3.226c0-1.088-0.037-2.166-0.096-3.239c2.181-1.688,3.379-4.494,2.871-7.399c-0.519-2.902-2.598-5.123-5.219-5.965c-0.628-2.085-1.368-4.12-2.218-6.098c1.458-2.332,1.621-5.372,0.151-7.922c-1.474-2.544-4.186-3.927-6.941-3.823c-1.293-1.727-2.69-3.367-4.165-4.937c0.585-2.695-0.3-5.618-2.552-7.52c-2.271-1.899-5.3-2.266-7.853-1.22c-1.794-1.178-3.659-2.254-5.585-3.229c-0.368-2.736-2.205-5.183-4.983-6.191c-2.771-1.009-5.745-0.314-7.787,1.543c-2.079-0.486-4.201-0.862-6.36-1.116c-1.282-2.442-3.837-4.117-6.79-4.117s-5.512,1.675-6.796,4.118c-2.158,0.254-4.278,0.629-6.356,1.116c-2.042-1.858-5.016-2.553-7.792-1.544c-2.771,1.008-4.603,3.455-4.972,6.19c-1.929,0.976-3.795,2.054-5.592,3.232c-2.553-1.049-5.587-0.685-7.85,1.217c-2.26,1.903-3.146,4.829-2.555,7.527c-1.472,1.566-2.867,3.206-4.158,4.93c-2.755-0.106-5.478,1.276-6.953,3.822c-1.474,2.555-1.311,5.602,0.158,7.935c-0.848,1.973-1.584,4.003-2.21,6.081c-2.623,0.841-4.705,3.063-5.219,5.969c-0.515,2.909,0.686,5.72,2.87,7.406c-0.06,1.07-0.096,2.147-0.096,3.232c0,1.081,0.036,2.153,0.095,3.22c-2.184,1.687-3.384,4.496-2.869,7.405c0.514,2.903,2.596,5.134,5.217,5.975c0.626,2.078,1.362,4.107,2.209,6.08c-1.466,2.332-1.627,5.377-0.155,7.93c1.474,2.556,4.194,3.934,6.948,3.825c1.292,1.726,2.688,3.365,4.162,4.933c-0.589,2.701,0.297,5.63,2.556,7.521c2.262,1.9,5.294,2.266,7.847,1.218c1.797,1.18,3.665,2.258,5.595,3.233c0.37,2.735,2.201,5.18,4.971,6.188c2.776,1.01,5.75,0.313,7.792-1.544c2.077,0.486,4.196,0.86,6.353,1.114c1.282,2.448,3.844,4.119,6.8,4.119c2.955,0,5.513-1.671,6.793-4.118c2.158-0.254,4.278-0.628,6.356-1.114c2.042,1.856,5.017,2.552,7.787,1.543c2.777-1.008,4.613-3.453,4.983-6.188c1.927-0.975,3.793-2.052,5.588-3.229c2.552,1.043,5.58,0.677,7.85-1.222c2.251-1.89,3.137-4.814,2.553-7.514c1.476-1.569,2.875-3.212,4.169-4.94c2.754,0.105,5.463-1.272,6.936-3.825c1.469-2.548,1.308-5.586-0.147-7.917c0.85-1.977,1.589-4.012,2.217-6.096c2.62-0.843,4.698-3.072,5.217-5.972C206.809,331.146,205.611,328.34,203.43,326.652z"/>
<path class="st2" d="M145.998,369.293v-91.748h0.297c25.197,0.152,45.585,20.639,45.585,45.881c0,25.229-20.388,45.715-45.585,45.867H145.998z"/>
<path class="st1" d="M145.998,369.293v-91.748h-0.297c-25.205,0.152-45.585,20.639-45.585,45.881c0,25.229,20.38,45.715,45.585,45.867H145.998z"/>
<path class="st11" d="M145.998,306.112c9.558,0,17.301,7.758,17.301,17.314c0,9.559-7.743,17.301-17.301,17.301s-17.309-7.742-17.309-17.301C128.689,313.87,136.44,306.112,145.998,306.112z"/>
<path class="st10" d="M96.214,95.643c0-27.498,22.285-49.783,49.776-49.783c27.498,0,49.784,22.285,49.784,49.783"/>
<circle class="st2" cx="17.305" cy="95.643" r="17.305"/>
<circle class="st2" cx="274.68" cy="95.635" r="17.305"/>
</svg>
#path {
height: 100%;
width: 100%;
}
<!-- SVG path along which to animate, this should be stretched to fit the container div -->
<svg id="path" viewBox="0 0 819.082 996.1" preserveAspectRatio="none">
<path id="thePath" d="M819.082,696.1c0,165.686-134.314,300-300,300H300c-165.686,0-300-134.314-300-300V300 C0,134.315,134.314,0,300,0h219.082c165.686,0,300,134.315,300,300V696.1z" />
</svg>
In a standard situation, I'd use the svg tag animateMotion to accomplish this:
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#thePath"/>
</animateMotion>
But here the path I want to follow has to be contained in a separate <svg></svg> because I want it to be stretched to the parent div and not the drawing.
How can I accomplish this?
It'd be ideal if the solution was pure SVG/CSS but if it requires some javascript it's okay too. Please no jQuery.