Change SVG <circle> <rect> values through css - css

I have this SVG code
<pattern id="thirdPattern" x="0" y="5" width="40" height="40" patternUnits="userSpaceOnUse">
<circle r="10" cx="15" cy="10" />
</pattern>
Can I change r, cx & cy values through CSS, Just like this
#keyframes move {
25% {
cx: 50%;
cy: 50%;
r: 60;
}
}
or this
#thirdPattern {
cx: 25;
cy: 25;
r: 50;
}
This code works, But the code editor does show errors becuase of r cx cy are not CSS properties.


Not in SVG 1.1, but SVG 2 should support this. Browsers are gradually adding SVG 2 capabilities - your mileage may vary.

Related

how to create an Angular circular progress bar using SVG

I have created a design for angular circular progress bar. The issue is that i want to give the percentage value dynamic . I have got the dynamic value from API but i have no idea how should i implement it to create a circular progress bar using SVG. I'll share my html skeleton and the css i use.
.track,
.filled {
stroke-width: 10;
fill: none;
}
.track {
stroke: rgba(160, 215, 231, 0.85);
}
.filled {
stroke: blue;
stroke-dashoffset: 202;
stroke-dasharray: 440;
}
<div class="col-lg-3">
<div class="iconbox-singleD7 dashboard-height">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-35 0 190 190" class="mw">
<circle class="track" cx="60" cy="60" r="55" />
<text x="40" y="60" fill="#fff">Patients</text>
<text x="50" y="75" fill="#fff">{{totalPatient}}</text>
<circle class="filled" cx="60" cy="60" r="55" />
<circle cx="30" cy="136" r="5" stroke="blue" stroke-width="3" fill="blue" /><text x="40" y="140" fill="#fff">Male {{malePercentage}}%</text>
<circle cx="30" cy="152" r="5" stroke="rgba(160, 215, 231, 0.85)" stroke-width="3" fill="rgba(160, 215, 231, 0.85)" /><text x="40" y="155" fill="#fff">Female {{femalePercentage}}%</text>
</svg>
</div>
</div>
What i want is that. Lets say i get a male percentage = 70% or any value from an API i want to set the progress bar according to the percentage i get from API. How can i achieve that .i'm not familier with SVG. So any help will be appreciated. Thanks

Hello here is the code pen: https://codepen.io/Echyzen/pen/LYBraGB
var percentage = 75;
var a = -3.46;
var b = 440;
function changePer() {
const finalOffset = Math.round(a*percentage+b)
const concernedCircle = document.getElementsByClassName('filled')[0];
concernedCircle.style.strokeDashoffset = finalOffset;
}
which extract the a and b of the affine function.
You have to click on the button to execute the 75% percentage.
Or using querySelector:
var percentage = 70;
var a = -3.46;
var b = 440;
function changePer() {
const finalOffset = Math.round(a*percentage+b)
const concernedCircle = document.querySelector('.filled');
concernedCircle.style.strokeDashoffset = finalOffset;
}

Start with the <progress-circle> native Web Component I built : https://pie-meister.github.io/
It is unlicensed Open Source code; do with it whatever your want. Documentation at Dev.to
<progress-circle value="100%">Web Components</progress-circle>
<progress-circle value="71%" stroke="red">React</progress-circle>
<progress-circle value="90%" stroke="orange">Others</progress-circle>
<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>
<style>
progress-circle {
font-family: Arial;
width: 180px; /* StackOverflow viewport */
}
progress-circle::part(label) {
font-size:70px;
}
</style>

How do I target each circle within svg using css?

I have this
<svg class="wheel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
<circle fill="#ffffff" cx="512" cy="512" r="110"></circle>
<circle stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>
How can I style each circle using css? Thank you.

If you know that the SVG markup won't change, then this will suffice:
.wheel * {
// CSS here
}
Otherwise, give the circles a class and write like:
.wheel .wheel-circle {
// CSS here
}
If you mean each circle needs different styles then simply:
.wheel #wheel-circle-1 {
// CSS here
}
.wheel #wheel-circle-2 {
// CSS here
}

Method 1:
The best way would be to add an id to each circle:
<svg class="wheel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
<circle id="innerCircle" fill="#ffffff" cx="512" cy="512" r="110"></circle>
<circle id="outerCircle" stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>
And then just target that.
#innerCircle {
fill: red;
}
#outerCircle {
stroke: blue;
}
Method 2:
But if this is not desirable, try using the nth-child selector on the parent:
.wheel:nth-child(1) {
fill: red;
}
.wheel:nth-child(2) {
stroke: blue;
}
I hope this helps!

Positioning many groups in SVG

I am trying to position a scale with numbers and lines on the top of my black half-circle gauge. The problem is that I have two groups of elements that do not fit with each other in the same group .. Thus the local coordinate system of the scale element is located on the bottom and I cannot use transform functions to place it in the center..
var r = 400;
var circles = document.querySelectorAll('.circle');
var total_circles = circles.length;
for (var i = 0; i < total_circles; i++) {
circles[i].setAttribute('r', r);
}
var meter_dimension = (r * 2) + 100;
var wrapper = document.querySelector('#wrapper');
wrapper.style.width = meter_dimension + 'px';
wrapper.style.height = meter_dimension + 'px';
var cf = 2 * Math.PI * r;
var semi_cf = cf / 2;
var z = 40 * Math.PI;
document.querySelector('#outline_ends')
.setAttribute('stroke-dasharray', 2 + ',' + (semi_cf - 2)); -
document.querySelector('#mask')
.setAttribute('stroke-dasharray', semi_cf + ',' + cf);
document.querySelector('#low')
.setAttribute('stroke-dasharray', semi_cf - z + ',' + cf);
for (i = 0; i <= 180; i = i + 10) {
var new_tick = noon.cloneNode(true);
new_tick.getElementsByTagName('text')[0].textContent = i;
new_tick.removeAttribute("id");
new_tick.setAttribute("transform", "rotate(" + i + " 0 0)");
gauge.appendChild(new_tick);
}
body {
background-color: grey;
}
#wrapper {
position: relative;
margin: auto;
}
#meter {
width: 100%;
height: 100%;
transform: rotateX(180deg);
}
.circle {
fill: none;
}
#mask {
stroke: yellow;
stroke-width: 60;
}
.black {
fill: none;
stroke: #000000;
stroke-width: 30;
}
.range {
stroke-width: 60;
}
.scale {
stroke: #ffffff;
}
rect {
fill: transparent;
}
<div id="wrapper">
<svg id="meter">
<g class="scale">
<circle id="mask" class="circle" cx="50%" cy="50%">
</circle>
<circle id="low" class="black" cx="50%" cy="50%" r="360">
</circle>
<circle id="outline_ends" class="circle outline" cx="50%" cy="50%">
</circle>
<g id="gauge" transform="rotate(-90)">
<g id="noon">
<rect x="-10" y="-220" width="20" height="100" />
<line x1="0" y1="-190" x2="0" y2="-180" />
<text x="0" y="-200"></text>
</g>
</g>
</g>
</svg>
</div>

This is an example of positioning a group in SVG:
You put the group in the <defs> and you reuse it with <use>. The <use> element may have a x and a y attributes that are defining the new position.
svg{border:1px solid; max-height:100vh;}
<svg viewBox="0 0 200 75">
<defs>
<g id="g1">
<rect width="20" height="20" />"
</g>
</defs>
<use xlink:href ="#g1" x="100" y="50"/>
<use xlink:href ="#g1" x="50" y="10" fill="red"/>
</svg>
In the example above I draw the same group twice, every time in a different position.

Animating SVG fill linearly along length of path

I have an SVG file that represents a thin shape. I would like to craft an animation such that the entire shape appears be being drawn out.
Example of what I am talking about with the 'S' logo from the Samsung Galaxy S brand:
https://codepen.io/anon/pen/MGawzy
Animation code (because StackOverflow forces me to include it):
#keyframes test {
0% {
clip-path: inset(0px 0px 300px 0px);
}
80% {
clip-path: inset(0px 0px 0px 0px);
}
100% {
clip-path: inset(0px 0px 0px 0px);
}
}
svg {
animation: test;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
A simple SVG in the example above is easy to animate, I can just slowly un-crop the SVG from top-down. But if I have a very complex shape which cannot be animated in this manner (maybe the red line in NASA's logo: https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg), I need a better solution.
Just to clarify again, I do not want to animate the stroke. I want to be able to animate the fill, like it is begin drawn out.
Is there any general solution to this? If there is no general solution, how would I go about key-framing this on my own in a reasonable amount of time?
EDIT: To give some insight, I'm trying to animate the treble clef: https://upload.wikimedia.org/wikipedia/commons/e/e8/G-clef.svg

You could do this (easier to describe than to do, there's a lot of fiddly work involved):
Draw a smooth path on top of the shape that follows what you would consider the "path" and select such a stroke-width that the path covers the shape everywhere.
I would leave the final dot completely out of this, as it is so much thicker than the rest.
Divide the path in such a way that it has no overlapping parts. Order the parts in drawing order, make sure every partial path is drawn in the right direction.
Now divide the shape in the same way, making sure each part is exactly beneath the path on top.
Associate each of the shapes with one of the paths on top, defining the path as a mask for the shape. The path must have stroke:white. Preserve order.
Now you can animate the paths that define the masks with a stroke-dashoffset animation.
I would simply hide the final dot until the pseudo-line animation finishes and then reveal it at once.
Edit: I've definitely got too much time on my hands today, here's the working result:
.clef {
fill: black;
stroke: black;
stroke-width: 0.1;
}
mask path {
fill: none;
stroke: white;
stroke-width: 6;
}
#mask1 path {
stroke-dasharray: 100.8186 100.8186;
stroke-dashoffset: 100.8186;
animation: draw1 1s linear forwards;
}
#keyframes draw1 {
from { stroke-dashoffset: 100.8186; }
to { stroke-dashoffset: 0; }
}
#mask2 path {
stroke-dasharray: 83.6713 83.6713;
stroke-dashoffset: 83.6713;
animation: draw2 1s 1s linear forwards;
}
#keyframes draw2 {
from { stroke-dashoffset: 83.6713; }
to { stroke-dashoffset: 0; }
}
.dot {
opacity: 0;
animation: reveal 0s 2.5s forwards;
}
#keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75">
<defs>
<mask id="mask1" maskUnits="userSpaceOnUse">
<path d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112" />
</mask>
<mask id="mask2" maskUnits="userSpaceOnUse">
<path d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" />
</mask>
</defs>
<path class="clef" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z" />
<path class="clef" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48" />
<path class="clef dot" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z" />
</svg>

SVG solution
In this example, solutions from the #ccprog response are used, but the animation is moved from the CSS rules directly to the SVG animation commands
The commands that implement the animation are the same for all patches. The difference in the numeric value of the stroke-dasharray and stroke-dashoffset attributes for each patch:
<animate attributeName="stroke-dashoffset" dur="1s" values="100.8186;0" fill="freeze" />
The animation command for the appearance of a dot on the end of a treble clef:
<animate attributeName="opacity" dur="0.05s" values="0;1" begin="an2.end-0.05s" fill="freeze" />
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75">
<defs>
<mask id="mask1" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="100.8186" stroke-dashoffset="100.8186" d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112">
<animate attributeName="stroke-dashoffset" dur="1s" values="100.8186;0" fill="freeze"/>
</path>
</mask>
<mask id="mask2" maskUnits="userSpaceOnUse">
<path fill="none" stroke="white" stroke-width="6" stroke-dasharray="83.6713" stroke-dashoffset="83.6713" d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" >
<animate id="an2" attributeName="stroke-dashoffset" dur="1s" values="83.6713;0" begin="+1s" fill="freeze"/>
</path>
</mask>
</defs>
<path class="clef" fill="black" stroke="black" stroke-width="0.1" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z"/>
<path class="clef" fill="black" stroke="black" stroke-width="0.1" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48"/>
<path class="clef dot" opacity="0" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z">
<animate attributeName="opacity" dur="0.05s" values="0;1" begin="an2.end-0.05s" fill="freeze"/>
</path>
</svg>
Update 2020
SMIL SVG does not work in IE - caniuse

Animate dashed SVG line

I would like to animate a dashed line in a SVG-file. The line should »grow« from 0 length to full length. All the methods I found are not suitable for me.
Does anyone have an idea, how to solve this?
That's the path in my svg file:
<path class="path" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M234.3,119
c-31-0.7-95,9-128.7,50.8"/>
To animate the line as straight line i did:
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Of course, this is not working, when I want the line to be dashed.
Is there anybody who has an idea how to solve this?
That's my codepen: http://codepen.io/anon/pen/WpZNJY
PS: I can't use two paths over each other to hide the path underneath because I'm having a coloured background.

You can also do this just using masks as so:
.paths {
fill: none;
stroke: black;
stroke-dasharray: 5;
}
.mask {
fill: none;
stroke: white;
stroke-width: 10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 830 500" >
<defs>
<path id="first" d="M234.3,119c-31-0.7-95,9-128.7,50.8"/>
<path id="vienna" d="M382.8,243.8c2.9-36.1,15.8-110.3,110.1-145.4"/>
<path id="budapest" d="M550.6,319.4c34-2.7,109-2.1,174.8,50.5"/>
<path id="salzburg" d="M265,323c21.5,12.1,57.2,39.5,60.7,85.1"/>
<path id="tyrol" d="M147.8,319.5c-27.1,7-79.7,31.3-92.8,74.2"/>
<mask id="first-mask"><use class="mask" xlink:href="#first" /></mask>
<mask id="vienna-mask"><use class="mask" xlink:href="#vienna" /></mask>
<mask id="budapest-mask"><use class="mask" xlink:href="#budapest" /></mask>
<mask id="salzburg-mask"><use class="mask" xlink:href="#salzburg" /></mask>
<mask id="tyrol-mask"><use class="mask" xlink:href="#tyrol" /></mask>
</defs>
<g class="paths">
<use xlink:href="#first" mask="url(#first-mask)" />
<use xlink:href="#vienna" mask="url(#vienna-mask)" />
<use xlink:href="#budapest" mask="url(#budapest-mask)" />
<use xlink:href="#salzburg" mask="url(#salzburg-mask)" />
<use xlink:href="#tyrol" mask="url(#tyrol-mask)" />
</g>
</svg>
This is also available as:
codepen of single dotted path
codepen of these plane tracks
Enjoy!
But note ... make sure you test your code cross-browser and fall back to animate tags or javascript if you have issues.

One of the ways to do this is with Javascript. It duplicates a path by creating a polyline.
Try the example below:
<!DOCTYPE HTML>
<html>
<head>
<style>
polyline{
stroke-dasharray:8;
stroke:black;
fill:none;
stroke-width:1;
}
</style>
</head>
<body >
This builds a smooth/dashed polylines that replicates your paths.<br>
<button onClick=animateDashPaths()>Animate Paths</button><br>
<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 830 500" enable-background="new 0 0 830 500" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-miterlimit="10" d="M234.3,119
c-31-0.7-95,9-128.7,50.8"/>
<!-- Vienna Dash -->
<path id="pathVienna" display="none" stroke-miterlimit="10" d="M382.8,243.8
c2.9-36.1,15.8-110.3,110.1-145.4"/>
<!-- Budapest Dash -->
<path id="pathBudapest" display="none" stroke-miterlimit="10" d="M550.6,319.4
c34-2.7,109-2.1,174.8,50.5"/>
<!-- Salzburg Dash -->
<path id="pathSalzburg" display="none" stroke-miterlimit="10" d="M265,323
c21.5,12.1,57.2,39.5,60.7,85.1"/>
<!-- Tyrol Dash -->
<path id="pathTyrol" display="none" stroke-miterlimit="10" d="M147.8,319.5
c-27.1,7-79.7,31.3-92.8,74.2"/>
</svg>
<script>
//---button---
function animateDashPaths()
{
var NS="http://www.w3.org/2000/svg"
//----Vienna----------------
var endLengthVienna=pathVienna.getTotalLength()
var lengthDeltaVienna=endLengthVienna/200
var polylineVienna=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineVienna)
var pntListVienna=polylineVienna.points
var iTVienna=setInterval(drawPathVienna,5)
var cntVienna=0
function drawPathVienna()
{
var len=lengthDeltaVienna*cntVienna++
if(len<endLengthVienna)
{
var pnt=pathVienna.getPointAtLength(len)
pntListVienna.appendItem(pnt)
}
else
clearInterval(iTVienna)
}
//----Budapest----------------
var endLengthBudapest=pathBudapest.getTotalLength()
var lengthDeltaBudapest=endLengthBudapest/200
var polylineBudapest=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineBudapest)
var pntListBudapest=polylineBudapest.points
var iTBudapest=setInterval(drawPathBudapest,5)
var cntBudapest=0
function drawPathBudapest()
{
var len=lengthDeltaBudapest*cntBudapest++
if(len<endLengthBudapest)
{
var pnt=pathBudapest.getPointAtLength(len)
pntListBudapest.appendItem(pnt)
}
else
clearInterval(iTBudapest)
}
//----Salzburg----------------
var endLengthSalzburg=pathSalzburg.getTotalLength()
var lengthDeltaSalzburg=endLengthSalzburg/200
var polylineSalzburg=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineSalzburg)
var pntListSalzburg=polylineSalzburg.points
var iTSalzburg=setInterval(drawPathSalzburg,5)
var cntSalzburg=0
function drawPathSalzburg()
{
var len=lengthDeltaSalzburg*cntSalzburg++
if(len<endLengthSalzburg)
{
var pnt=pathSalzburg.getPointAtLength(len)
pntListSalzburg.appendItem(pnt)
}
else
clearInterval(iTSalzburg)
}
//----Tyrol----------------
var endLengthTyrol=pathTyrol.getTotalLength()
var lengthDeltaTyrol=endLengthTyrol/200
var polylineTyrol=document.createElementNS(NS,"polyline")
Layer_1.appendChild(polylineTyrol)
var pntListTyrol=polylineTyrol.points
var iTTyrol=setInterval(drawPathTyrol,5)
var cntTyrol=0
function drawPathTyrol()
{
var len=lengthDeltaTyrol*cntTyrol++
if(len<endLengthTyrol)
{
var pnt=pathTyrol.getPointAtLength(len)
pntListTyrol.appendItem(pnt)
}
else
clearInterval(iTTyrol)
}
}
</script>
</body>
</html>

I think you should just be able to add stroke-dasharray to your animation and lower the dash array in your css. An updated version of your codepen; http://codepen.io/harvey89/pen/NpaWBE
stroke-dashoffset: 1000;
stroke-dasharray: 10;
#keyframes dash {
to {
stroke-dashoffset: 0;
stroke-dasharray: 10;
}
}
You'll probably have to play around with numbers to get your desired effect though

Resources