How to render n slices inside svg circle? - javascript

I am developing a reactJS app.
I need to render an svg circle and when I click it it spawns n equal slices inside.
I created the slices, here is the code
renderSlices = () => {
let slices = [];
const numberOfSlice = 12; //number of slices
for (let i = 0; i < numberOfSlice; i++) {
slices.push({ percent: 1 / numberOfSlice, color: 'gray' });
}
let cumulativePercent = 0;
let arr = [];
arr = slices.map(slice => {
const [startX, startY] = this.getCoordinatesForPercent(cumulativePercent.toString());
cumulativePercent += slice.percent;
const [endX, endY] = this.getCoordinatesForPercent(cumulativePercent.toString());
const largeArcFlag = slice.percent > 0.5 ? 1 : 0;
const pathData = [
`M ${startX} ${startY}`, // Move
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
'L 0 0', // Line
].join(' ');
return <path d={pathData} fill={slice.color} key={pathData} />;
});
return arr;
}
getCoordinatesForPercent(percent: string) {
const x = Math.cos(2 * Math.PI * parseFloat(percent));
const y = Math.sin(2 * Math.PI * parseFloat(percent));
return [x, y];
}
Render method:
<div className="container">
<svg
height="306"
width="306"
viewBox="-1 -1 2 2"
>
{/* <circle cx="150" cy="150" r="148" stroke="black"
strokeWidth="2" fill={"transparent"}/> */}
{this.renderSlices()}
</svg>
</div>
The problem is when I remove the comment from the circle tag and I remove the viewBox, only the circle show up, and when I comment the circle tag and put the viewBox, only the slices show up.
I would like to have the circle with a visible stroke and inside it the slices.
Any help please ?
EDIT:
<svg height="306" width="306" viewBox="0 0 306 306">
<path d="M 1 0 A 1 1 0 0 1 0.8660254037844387 0.49999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 0.5000000000000001 0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.5000000000000001 0.8660254037844386 A 1 1 0 0 1 6.123233995736766e-17 1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 6.123233995736766e-17 1 A 1 1 0 0 1 -0.4999999999999998 0.8660254037844387 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.4999999999999998 0.8660254037844387 A 1 1 0 0 1 -0.8660254037844385 0.5000000000000003 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.8660254037844385 0.5000000000000003 A 1 1 0 0 1 -1 5.66553889764798e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -1 5.66553889764798e-16 A 1 1 0 0 1 -0.866025403784439 -0.4999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.866025403784439 -0.4999999999999994 A 1 1 0 0 1 -0.5000000000000004 -0.8660254037844385 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.5000000000000004 -0.8660254037844385 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -1.8369701987210297e-16 -1 A 1 1 0 0 1 0.5000000000000001 -0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.5000000000000001 -0.8660254037844386 A 1 1 0 0 1 0.8660254037844388 -0.49999999999999967 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.8660254037844388 -0.49999999999999967 A 1 1 0 0 1 1 -2.4492935982947064e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
</svg>


getCoordinatesForPercent(percent: string, radius: number, circle: {x: number, y: number}) {
const x = radius * Math.cos(2 * Math.PI * parseFloat(percent)) + circle.x;
const y = radius * Math.sin(2 * Math.PI * parseFloat(percent)) + circle.y;
return [x, y];
}
Multiply with radius and add the circle coordinates
and change A 1 1 0 ${largeArcFlag} to A ${radius} ${radius} 0 ${largeArcFlag} and 'L 0 0' to 'L ${circle.x} ${circle.y}'

Related

Rounded corners in SVG path semi circle

I have a path which is a semi-circle. How do I make the corners rounded? I do not want to use stroke-linecap: round as I need it to be rounded only on these corners:
<svg>
<g>
<!--background -->
<path fill="none" stroke-dasharray="" stroke-width="16" stroke="#607985" d="M30 100 A 40 40 0 0 1 170 100"></path>
<!-- strokes -->
<path id="meter-back" fill="none" stroke-width="15" stroke="white" d="M30 100 A 40 40 0 0 1 170 100"></path>
<!--progress -->
<path id="meter-fill" fill="none" stroke-dashoffset="219.942" stroke-dasharray="109.971, 109.971" stroke="rgba(96,121,133,0.7)" stroke-width="15" d="M30 100 A 40 40 0 0 1 170 100" stroke="#607985"></path>
</g>
</svg>

Here is a fixed solution. dividerPos can be in range from 0 to 1:
const getPath = (outerRadius, innerRadius, cornerRadius, dividerPos) => {
const angle = Math.PI * (1 - dividerPos);
const outerPointX = outerRadius * Math.cos(angle);
const outerPointY = outerRadius * -Math.sin(angle);
const innerPointX = innerRadius * Math.cos(angle);
const innerPointY = innerRadius * -Math.sin(angle);
const left = `M ${-outerRadius},0
A ${outerRadius},${outerRadius} 0 0 1
${outerPointX},${outerPointY}
L ${innerPointX},${innerPointY}
A ${innerRadius},${innerRadius} 0 0 0 ${-innerRadius},0
Q ${-innerRadius},${cornerRadius}
${-innerRadius-cornerRadius},${cornerRadius}
H ${-outerRadius+cornerRadius}
Q ${-outerRadius},${cornerRadius}
${-outerRadius},0
Z`;
const right = `M ${outerPointX},${outerPointY}
A ${outerRadius},${outerRadius} 0 0 1
${outerRadius},0
Q ${outerRadius},${cornerRadius}
${outerRadius-cornerRadius},${cornerRadius}
H ${innerRadius+cornerRadius}
Q ${innerRadius},${cornerRadius}
${innerRadius},0
A ${innerRadius},${innerRadius} 0 0 0
${innerPointX},${innerPointY}
Z`;
return {left, right};
};
const {left, right} = getPath(120, 90, 15, 0.5);
d3.select('.left').attr('d', left);
d3.select('.right').attr('d', right);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='300' height='200'>
<g transform='translate(150,150)'>
<path stroke='grey' fill='grey' class='left'/>
<path stroke='grey' fill='none' class='right'/>
</g>
</svg>

Use getPath routine to compute the desired path
(The 0,0 point in the center of the semi-circle):
const getPath = (outerRadius, innerRadius, cornerRadius) => {
return `M ${-outerRadius},0
A ${outerRadius},${outerRadius} 1 1 1 ${outerRadius},0
Q ${outerRadius},${cornerRadius}
${outerRadius-cornerRadius},${cornerRadius}
H ${innerRadius+cornerRadius}
Q ${innerRadius},${cornerRadius}
${innerRadius},0
A ${innerRadius},${innerRadius} 0 0 0
${-innerRadius},0
Q ${-innerRadius},${cornerRadius}
${-innerRadius-cornerRadius},${cornerRadius}
H ${-outerRadius+cornerRadius}
Q ${-outerRadius},${cornerRadius}
${-outerRadius},0
Z`;
};
d3.select('path').attr('d', getPath(120, 90, 12));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='300' height='200'>
<g transform='translate(150,150)'>
<path stroke='red' fill='none'/>
<circle fill='red' r='5' cx='0' cy='0'/>
</g>
</svg>

Can you use GSAP in a wix HTML iframe element?

I have got aa animation working using HTML and javascript with GSAP, however when i implement this code as HTML content in wix for my website it fails to work?
Is it possible to use GSAP within the wix environment and if so how do I import the GSAP module?
Thanks in advance for any help!
Edit: This is the code i have trued within the HTML element:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Page Title</title>
<link rel="stylesheet" href="./style_test.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"defer></script>
<script type="text/js" defer>
let tween = gsap.from('.r', { duration: 3, y: '10%', x:'300%' })
tween.repeat(0);
</script>
<div class="container" style=
"width:100%; height: auto;
border:10px dashed black;">
<svg
id="svg5344"
version="1.1"
id="svg"
width="100%" height="auto"
viewBox="58 0 180 200"
>
<path
style="fill:none;stroke:#808080;stroke-width:0.02401723px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 85.427742,87.94295 Z"
id="path7543" />
<g
stroke="#f1dd38" stroke-width="0.3" fill="#f1dd38" fill-rule="nonzero"
class="axpro">
<path
d="m 122.69115,99.69019 q 0.25918,0.77427 0.32152,1.22702 0.0656,0.45276 -0.17388,0.68897 -0.23622,0.22966 -0.83891,0.26247 -0.60235,0.0656 -1.65648,0.0656 -1.0971,0 -1.72111,-0.0328 -0.60236,-0.0262 -0.92519,-0.0984 -0.32152,-0.0984 -0.45177,-0.29527 -0.12795,-0.16404 -0.21653,-0.45275 l -1.8717,-5.59542 h -10.45614 l -1.76409,5.44319 q -0.0886,0.29527 -0.23622,0.51509 -0.12795,0.19684 -0.45176,0.32808 -0.29856,0.0984 -0.88221,0.16404 -0.55905,0.0328 -1.48457,0.0328 -0.989493,0 -1.548871,-0.0656 -0.559378,-0.0656 -0.774927,-0.29527 -0.216533,-0.26247 -0.150917,-0.70866 0.06234,-0.45275 0.321519,-1.20406 l 8.584336,-24.69826 q 0.12795,-0.36745 0.29855,-0.5807 0.17061,-0.22966 0.53773,-0.34448 0.38713,-0.13124 1.05412,-0.16405 0.66699,-0.0328 1.76442,-0.0328 1.26935,0 2.02196,0.0328 0.75328,0.0263 1.16207,0.16405 0.43011,0.0984 0.60235,0.34448 0.19685,0.22966 0.32152,0.64632 z M 109.91164,79.27273 h -0.0427 l -3.9372,11.83322 h 7.89609 z"
/>
<path
d="m 146.40005,99.66854 q 0.38713,0.7513 0.49474,1.20405 0.12796,0.45276 -0.12795,0.68897 -0.25918,0.22966 -0.94651,0.29528 -0.66699,0.0656 -1.8717,0.0656 -1.01115,0 -1.59218,-0.0328 -0.5807,-0.0328 -0.92519,-0.13124 -0.32152,-0.0984 -0.47342,-0.29527 -0.15092,-0.16404 -0.25918,-0.42979 l -5.22787,-10.0396 -5.20655,10.04748 q -0.12795,0.26246 -0.27887,0.42978 -0.15092,0.16405 -0.49474,0.29528 -0.32152,0.0984 -0.92519,0.13123 -0.58071,0.0328 -1.5492,0.0328 -1.11876,0 -1.74277,-0.0656 -0.60235,-0.0656 -0.81757,-0.29527 -0.21654,-0.22966 -0.0853,-0.68897 0.12795,-0.45275 0.53772,-1.20406 l 6.66949,-12.15572 -6.19614,-11.42411 q -0.38713,-0.77427 -0.53772,-1.22702 -0.12795,-0.47244 0.10827,-0.68897 0.25918,-0.22966 0.92519,-0.29528 0.66698,-0.0656 1.89335,-0.0656 1.01115,0 1.59218,0.0328 0.60235,0.0328 0.94684,0.16404 0.34416,0.0984 0.47342,0.26246 0.15092,0.16404 0.27887,0.42979 l 4.88388,9.20824 4.75468,-9.20824 q 0.12795,-0.26247 0.25918,-0.42979 0.15092,-0.16404 0.45177,-0.26246 0.32152,-0.0984 0.86055,-0.16404 0.55938,-0.0328 1.52755,-0.0328 1.07578,0 1.69979,0.0656 0.62401,0.0328 0.86055,0.29528 0.23622,0.22965 0.10827,0.68897 -0.10827,0.45275 -0.47342,1.22702 l -6.19614,11.3598 z"
/>
<path
d="m 169.89379,82.41411 q 0,2.34577 -0.73129,4.15219 -0.73162,1.80772 -2.1299,3.05443 -1.39828,1.22702 -3.44229,1.87006 -2.02229,0.64632 -4.7762,0.64632 h -2.32347 v 8.88542 q 0,0.22965 -0.15092,0.38713 -0.12795,0.16404 -0.45177,0.29528 -0.32152,0.0984 -0.86055,0.16404 -0.53806,0.0656 -1.37696,0.0656 -0.81758,0 -1.37696,-0.0656 -0.53772,-0.0656 -0.86055,-0.16404 -0.32152,-0.0984 -0.45177,-0.29528 -0.12795,-0.16404 -0.12795,-0.38713 V 75.97978 q 0,-1.01049 0.5164,-1.50589 0.53805,-0.51509 1.39861,-0.51509 h 6.56191 q 0.98982,0 1.8717,0.0984 0.90354,0.0656 2.15156,0.32808 1.24769,0.22966 2.51703,0.90222 1.291,0.66601 2.19454,1.69946 0.90353,1.01049 1.37695,2.38843 0.47342,1.35497 0.47342,3.05443 z m -5.91648,0.4101 q 0,-1.46324 -0.5164,-2.40812 -0.5164,-0.94815 -1.26934,-1.39762 -0.75295,-0.45275 -1.59218,-0.56102 -0.81758,-0.13123 -1.69946,-0.13123 h -2.40942 v 9.44479 h 2.53869 q 1.3553,0 2.25883,-0.36745 0.92519,-0.36417 1.50589,-1.01049 0.58104,-0.666 0.88221,-1.57151 0.30184,-0.92518 0.30184,-2.00129 z"
/>
<path
d="m 194.97962,101.06715 q 0,0.22965 -0.0853,0.4101 -0.0853,0.16404 -0.40878,0.26246 -0.32152,0.0984 -0.94652,0.16404 -0.62368,0.0328 -1.69979,0.0328 -0.90353,0 -1.44158,-0.0328 -0.53773,-0.0328 -0.86056,-0.16404 -0.30183,-0.13123 -0.43044,-0.29527 -0.12795,-0.19685 -0.21654,-0.45275 L 186.3944,94.7739 q -0.45176,-1.05314 -0.88221,-1.87334 -0.43011,-0.81693 -0.96816,-1.35498 -0.5164,-0.56102 -1.20472,-0.83988 -0.68831,-0.29528 -1.59217,-0.29528 h -1.76409 v 10.60653 q 0,0.22966 -0.15092,0.38714 -0.12795,0.16404 -0.45177,0.29527 -0.32152,0.0984 -0.86056,0.16404 -0.53772,0.0656 -1.37695,0.0656 -0.81758,0 -1.37696,-0.0656 -0.53772,-0.0656 -0.86055,-0.16404 -0.32152,-0.0984 -0.45177,-0.29527 -0.12795,-0.16404 -0.12795,-0.38714 V 75.73766 q 0,-0.94816 0.47309,-1.35498 0.49475,-0.42978 1.20471,-0.42978 h 7.20738 q 1.09711,0 1.80707,0.0328 0.70997,0.0328 1.291,0.0984 1.67814,0.22966 3.01211,0.81692 1.35531,0.58071 2.28049,1.52886 0.94685,0.92519 1.44159,2.21455 0.49475,1.26967 0.49475,2.92648 0,1.39762 -0.36581,2.55903 -0.34416,1.14172 -1.0328,2.04394 -0.68831,0.90223 -1.69946,1.57151 -1.01115,0.66601 -2.30214,1.07611 0.62401,0.29527 1.16173,0.73162 0.55938,0.42978 1.0328,1.05314 0.49475,0.60367 0.92519,1.39762 0.43011,0.77427 0.83923,1.76508 l 2.34512,5.48617 q 0.32152,0.81692 0.43011,1.20405 0.10827,0.36745 0.10827,0.58071 z m -7.29338,-18.88992 q 0,-1.37794 -0.62401,-2.32281 -0.62368,-0.94487 -2.04394,-1.33529 -0.43044,-0.0984 -0.98982,-0.16404 -0.53772,-0.0656 -1.50589,-0.0656 h -2.53869 v 7.8956 h 2.88317 q 1.20472,0 2.10825,-0.29527 0.90354,-0.29528 1.50589,-0.81693 0.60236,-0.53805 0.90354,-1.26967 0.30183,-0.73162 0.30183,-1.63384 z"
/>
<path
d="m 223.72292,87.55579 q 0,3.46388 -0.86056,6.19614 -0.86056,2.73291 -2.56034,4.64726 -1.69979,1.89303 -4.21686,2.90352 -2.49571,0.9908 -5.78738,0.9908 -3.24866,0 -5.6798,-0.83988 -2.40943,-0.85958 -4.02316,-2.60169 -1.6135,-1.74211 -2.43108,-4.43171 -0.79593,-2.69027 -0.79593,-6.36838 0,-3.37792 0.86056,-6.0672 0.86056,-2.70995 2.56034,-4.60396 1.69979,-1.89303 4.19527,-2.90352 2.51704,-1.01049 5.83043,-1.01049 3.1627,0 5.57222,0.83989 2.43108,0.83989 4.04468,2.582 1.63516,1.74211 2.45274,4.41039 0.83923,2.64761 0.83923,6.26044 z m -5.93801,0.29527 q 0,-2.19486 -0.34415,-3.98027 -0.34416,-1.80773 -1.18339,-3.0774 -0.81758,-1.28936 -2.19453,-1.97833 -1.37696,-0.70866 -3.44226,-0.70866 -2.08692,0 -3.4854,0.79724 -1.39828,0.77427 -2.25884,2.08659 -0.86056,1.31233 -1.22637,3.0774 -0.34415,1.74211 -0.34415,3.70043 0,2.28016 0.34415,4.10921 0.34416,1.80773 1.16174,3.09709 0.81758,1.29263 2.19453,1.97832 1.37696,0.66601 3.46388,0.66601 2.08692,0 3.4853,-0.77427 1.39861,-0.77427 2.25917,-2.10956 0.86055,-1.33529 1.20471,-3.09709 0.36614,-1.78476 0.36614,-3.78638 z"
/>
</g>
<g
class="sounder">
<path
class="inner"
id="circle7537"
d="m 88.550781,68.023438 a 1.4062634,1.4062634 0 0 0 -0.101562,2.800781 c 2.626503,0.360204 5.027306,1.670173 6.751953,3.683593 a 1.4062634,1.4062634 0 1 0 2.136719,-1.828124 c -2.171963,-2.535634 -5.200082,-4.186996 -8.507813,-4.640626 a 1.4062634,1.4062634 0 0 0 -0.279297,-0.01562 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.70588235;fill-rule:nonzero;stroke:none;stroke-width:2.81224561;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<path
class="middle"
id="circle7539"
d="m 89.199219,62.269531 a 1.4062608,1.4062608 0 0 0 -0.203125,2.804688 c 4.079113,0.499853 7.82794,2.493814 10.521484,5.597656 a 1.4062608,1.4062608 0 1 0 2.123042,-1.84375 C 98.491407,65.199198 94.107077,62.865664 89.337891,62.28125 a 1.4062608,1.4062608 0 0 0 -0.138672,-0.01172 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.39215686;fill-rule:nonzero;stroke:none;stroke-width:2.81224036;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<path
class="outer"
id="circle7541"
d="m 89.714844,56.46875 a 1.4062608,1.4062608 0 0 0 -0.179688,2.806641 c 5.544575,0.636624 10.650814,3.315944 14.324224,7.517578 a 1.4063016,1.4063016 0 1 0 2.11718,-1.851563 c -4.1335,-4.727896 -9.882048,-7.744574 -16.121091,-8.460937 a 1.4062608,1.4062608 0 0 0 -0.140625,-0.01172 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.19607843;fill-rule:nonzero;stroke:none;stroke-width:2.81224036;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
</g>
<g
class="r">
<path
d="m 95.755245,101.05796 q 0,0.22966 -0.08858,0.41338 -0.08858,0.16404 -0.408132,0.26247 -0.32152,0.0984 -0.946842,0.16404 -0.623682,0.0328 -1.699459,0.0328 -0.903863,0 -1.44126,-0.0328 -0.537724,-0.0328 -0.860884,-0.16404 -0.298554,-0.13123 -0.430114,-0.29528 -0.127952,-0.19684 -0.216534,-0.45603 l -2.495383,-6.28275 q -0.451768,-1.06626 -0.88221,-1.89302 -0.430442,-0.82677 -0.967839,-1.3681 -0.516727,-0.5643 -1.204713,-0.84645 -0.688642,-0.29527 -1.592176,-0.29527 h -1.76442 v 10.71742 q 0,0.22965 -0.150917,0.39041 -0.127951,0.16404 -0.451767,0.29528 -0.32152,0.0984 -0.860557,0.16404 -0.538052,0.0656 -1.376627,0.0656 -0.817578,0 -1.376956,-0.0656 -0.537725,-0.0656 -0.860556,-0.16404 -0.3248,-0.0984 -0.452096,-0.29528 -0.127951,-0.16404 -0.127951,-0.39041 V 75.47027 q 0,-0.95799 0.473421,-1.36809 0.495074,-0.43635 1.205041,-0.43635 h 7.207446 q 1.097102,0 1.807069,0.0328 0.710296,0.0328 1.290999,0.0984 1.678134,0.22966 3.012111,0.82676 1.355302,0.58727 2.280162,1.54527 0.946842,0.93503 1.441588,2.23751 0.494746,1.28279 0.494746,2.95601 0,1.41403 -0.366466,2.58527 -0.34547,1.15157 -1.032799,2.06691 -0.688314,0.91207 -1.699459,1.58792 -1.011146,0.67256 -2.301816,1.08594 0.623682,0.29528 1.161406,0.73819 0.559378,0.43306 1.032799,1.06626 0.494418,0.61023 0.925188,1.41403 0.430114,0.78083 0.838903,1.78148 l 2.345123,5.54358 q 0.3248,0.82676 0.430114,1.21718 0.108267,0.37073 0.108267,0.58727 z M 88.46158,81.97054 q 0,-1.39106 -0.623682,-2.34906 -0.62401,-0.958 -2.044273,-1.34841 -0.430114,-0.0984 -0.98982,-0.16404 -0.538052,-0.0656 -1.505891,-0.0656 h -2.53869 v 7.9786 h 2.883175 q 1.204713,0 2.108248,-0.29527 0.903535,-0.29527 1.505891,-0.82677 0.602357,-0.54461 0.903863,-1.28279 0.298554,-0.73818 0.298554,-1.65353 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Calibri;-inkscape-font-specification:'Calibri Bold';letter-spacing:0px;word-spacing:0px;fill:#f1dd38;fill-opacity:1;stroke:none;stroke-width:1.1072911"
id="path3902" />
</g>
<g
transform="matrix(0.95843056,0,0,1.0433724,0,-87)"
stroke="#f1dd38" stroke-width="0.3" fill="#f1dd38" fill-rule="nonzero"
class="alert">
<path
d="m 135.66174,200.65343 q 0.1347,0.4041 0.16838,0.63983 0.0337,0.23573 -0.0898,0.35921 -0.12348,0.11225 -0.43779,0.1347 -0.3143,0.0337 -0.86434,0.0337 -0.57248,0 -0.89801,-0.0225 -0.31431,-0.0112 -0.48268,-0.0561 -0.16838,-0.0561 -0.23573,-0.14593 -0.0673,-0.0898 -0.11226,-0.23573 l -0.97659,-2.91855 h -5.45544 l -0.92046,2.83998 q -0.0449,0.15715 -0.12348,0.2694 -0.0674,0.10103 -0.23573,0.16838 -0.15715,0.0561 -0.46023,0.0786 -0.29186,0.0225 -0.77454,0.0225 -0.51636,0 -0.80821,-0.0337 -0.29186,-0.0337 -0.40411,-0.15715 -0.11225,-0.13471 -0.0786,-0.37043 0.0337,-0.23573 0.16837,-0.62861 l 4.47885,-12.88652 q 0.0673,-0.19083 0.15715,-0.30308 0.0898,-0.12348 0.28063,-0.1796 0.20206,-0.0673 0.55004,-0.0786 0.34798,-0.0224 0.92046,-0.0224 0.66229,0 1.05517,0.0224 0.39288,0.0112 0.60616,0.0786 0.22451,0.0561 0.31431,0.1796 0.10102,0.12348 0.16837,0.33676 z m -6.66776,-10.65271 h -0.0112 l -2.05421,6.17386 h 4.11965 z"
/>
<path
d="m 147.73757,200.51872 q 0,0.33676 -0.0337,0.57249 -0.0224,0.2245 -0.0786,0.38165 -0.0561,0.14593 -0.14593,0.21328 -0.0786,0.0674 -0.19082,0.0674 h -6.65654 q -0.37043,0 -0.62861,-0.21327 -0.24695,-0.22451 -0.24695,-0.71842 v -13.18959 q 0,-0.11225 0.0674,-0.20205 0.0786,-0.0898 0.24695,-0.14593 0.16838,-0.0561 0.44901,-0.0898 0.29185,-0.0337 0.71841,-0.0337 0.43778,0 0.71841,0.0337 0.28063,0.0337 0.44901,0.0898 0.16838,0.0561 0.23573,0.14593 0.0786,0.0898 0.0786,0.20205 v 11.68542 h 4.56865 q 0.11225,0 0.19082,0.0674 0.0898,0.0561 0.14593,0.20205 0.0561,0.13471 0.0786,0.37043 0.0337,0.22451 0.0337,0.56126 z"
/>
<path
d="m 160.18384,200.5973 q 0,0.32553 -0.0337,0.55003 -0.0224,0.21328 -0.0786,0.34798 -0.0561,0.13471 -0.14593,0.20206 -0.0786,0.0561 -0.1796,0.0561 h -7.29637 q -0.37044,0 -0.62862,-0.21327 -0.24695,-0.22451 -0.24695,-0.71842 v -12.66201 q 0,-0.4939 0.24695,-0.70718 0.25818,-0.22451 0.62862,-0.22451 h 7.25147 q 0.10102,0 0.1796,0.0561 0.0786,0.0561 0.1347,0.20205 0.0561,0.1347 0.0786,0.35921 0.0337,0.21328 0.0337,0.55003 0,0.31431 -0.0337,0.53881 -0.0225,0.21328 -0.0786,0.34798 -0.0561,0.1347 -0.1347,0.20206 -0.0786,0.0561 -0.1796,0.0561 h -5.18604 v 3.54716 h 4.38905 q 0.10102,0 0.1796,0.0674 0.0898,0.0561 0.14593,0.19083 0.0561,0.12348 0.0786,0.34798 0.0337,0.21328 0.0337,0.52758 0,0.32553 -0.0337,0.53881 -0.0224,0.21328 -0.0786,0.34798 -0.0561,0.12348 -0.14593,0.17961 -0.0786,0.0561 -0.1796,0.0561 h -4.38905 v 4.0972 h 5.23094 q 0.10102,0 0.1796,0.0674 0.0898,0.0561 0.14593,0.19083 0.0561,0.1347 0.0786,0.3592 0.0337,0.21328 0.0337,0.53881 z"
/>
<path
d="m 175.64968,201.37184 q 0,0.12347 -0.0449,0.21328 -0.0449,0.0786 -0.21328,0.1347 -0.16838,0.0561 -0.49391,0.0786 -0.32553,0.0225 -0.88679,0.0225 -0.47146,0 -0.75209,-0.0225 -0.28063,-0.0225 -0.449,-0.0786 -0.15716,-0.0674 -0.22451,-0.15715 -0.0673,-0.10103 -0.11225,-0.23573 l -1.30212,-3.24408 q -0.23573,-0.55004 -0.46023,-0.97659 -0.22451,-0.42656 -0.50514,-0.70719 -0.2694,-0.29185 -0.62861,-0.43778 -0.3592,-0.14593 -0.83066,-0.14593 h -0.92047 v 5.53402 q 0,0.11225 -0.0786,0.20205 -0.0674,0.0898 -0.23573,0.14593 -0.16838,0.0561 -0.44901,0.0898 -0.28063,0.0337 -0.71841,0.0337 -0.42656,0 -0.71841,-0.0337 -0.28063,-0.0337 -0.44901,-0.0898 -0.16838,-0.0561 -0.23573,-0.14593 -0.0674,-0.0898 -0.0674,-0.20205 v -13.1896 q 0,-0.4939 0.24695,-0.70718 0.25818,-0.22451 0.62861,-0.22451 h 3.76044 q 0.57249,0 0.94292,0.0224 0.37043,0.0224 0.67351,0.0561 0.87556,0.12348 1.57152,0.42656 0.70719,0.30308 1.18987,0.79698 0.49391,0.48269 0.75209,1.1562 0.25818,0.66228 0.25818,1.52662 0,0.72964 -0.19083,1.3358 -0.1796,0.59494 -0.53881,1.06639 -0.3592,0.47146 -0.88679,0.81944 -0.52758,0.34798 -1.20109,0.56126 0.32553,0.15715 0.60616,0.38166 0.29185,0.2245 0.53881,0.55003 0.25818,0.31431 0.48268,0.72964 0.22451,0.40411 0.43778,0.92046 l 1.22355,2.86243 q 0.16838,0.42655 0.2245,0.62861 0.0561,0.19083 0.0561,0.30308 z m -3.80534,-9.85572 q 0,-0.71841 -0.32553,-1.21232 -0.32553,-0.4939 -1.06639,-0.69596 -0.22451,-0.0561 -0.51636,-0.0898 -0.28063,-0.0337 -0.78576,-0.0337 h -1.32458 v 4.11964 h 1.50418 q 0.62861,0 1.10007,-0.14593 0.47145,-0.15715 0.78576,-0.42656 0.31431,-0.28063 0.47146,-0.66228 0.15715,-0.38166 0.15715,-0.85312 z"
/>
<path
d="m 189.31949,188.44042 q 0,0.32553 -0.0337,0.56126 -0.0224,0.22451 -0.0786,0.37043 -0.0561,0.13471 -0.14593,0.20206 -0.0786,0.0674 -0.1796,0.0674 h -3.63696 v 11.70787 q 0,0.11225 -0.0786,0.20205 -0.0674,0.0898 -0.23573,0.14593 -0.16838,0.0561 -0.46023,0.0898 -0.28063,0.0337 -0.70719,0.0337 -0.42655,0 -0.71841,-0.0337 -0.28063,-0.0337 -0.44901,-0.0898 -0.16837,-0.0561 -0.24695,-0.14593 -0.0674,-0.0898 -0.0674,-0.20205 v -11.70787 h -3.63696 q -0.11225,0 -0.19083,-0.0674 -0.0786,-0.0674 -0.1347,-0.20206 -0.0561,-0.14592 -0.0898,-0.37043 -0.0224,-0.23573 -0.0224,-0.56126 0,-0.33675 0.0224,-0.57248 0.0337,-0.23573 0.0898,-0.37043 0.0561,-0.14593 0.1347,-0.20206 0.0786,-0.0673 0.19083,-0.0673 h 10.23737 q 0.10102,0 0.1796,0.0673 0.0898,0.0561 0.14593,0.20206 0.0561,0.1347 0.0786,0.37043 0.0337,0.23573 0.0337,0.57248 z"
/>
</g>
<g
stroke="#f8ed98" stroke-width="0.3" fill="#f8ed98" fill-rule="nonzero"
class="line">
<path
d="m 74.779297,106.37891 v 1.03906 H 224.04492 v -1.03906 z"
id="path53" />
<path
d="m 74.779297,124.72656 v 1.03906 H 224.04492 v -1.03906 z"
id="path53-8" />
</g>
</svg>
</div>
</body>
</html>

Converting an SVG into a jQuery function

I have an svg
<svg class="svg_el" viewbox="0 0 100 100" preserveaspectratio="none">
<path class="overlay_path">
<animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0; M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0; M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0; M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" fill="freeze" repeatCount="1"></animate>
<animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0; M 0 25 C 50 15 50 60 100 50 V 100 H 0; M 0 50 C 50 50 50 85 100 80 V 100 H 0; M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.73s" fill="freeze" repeatCount="1"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0; M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0; M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0; M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.1s" fill="freeze" repeatCount="1"></animate>
<animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0; M 0 25 C 50 15 50 60 100 50 V 100 H 0; M 0 50 C 50 50 50 85 100 80 V 100 H 0; M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.63s" fill="freeze" repeatCount="1"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0; M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0; M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0; M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.2s" fill="freeze" repeatCount="1"></animate>
<animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0; M 0 25 C 50 15 50 60 100 50 V 100 H 0; M 0 50 C 50 50 50 85 100 80 V 100 H 0; M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.53s" fill="freeze" repeatCount="1"></animate>
</path>
</svg>
I'm trying to use it as a page transition so that it covers the entire screen before the next page loads but the problem I'm having is that even with SVGSVGELEMENT.getCurrentTime(), I can't seem to pause it at the correct spot and so the svg will pause at different points.
$('.the_box').removeClass('loaded');
$('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', function() {
var svgDoc = $('.ccs svg');
var animWatch = setInterval(function() {
if (svgDoc[0].getCurrentTime() > 0.56 && !($('.the_box').hasClass('loaded'))) {
svgDoc[0].pauseAnimations();
console.log(svgDoc[0].getCurrentTime());
} else if (svgDoc[0].getCurrentTime() > 0.56 && $('.the_box').hasClass('loaded')) {
svgDoc[0].unpauseAnimations();
$('.the_box').siblings('.slider-transition').html($('.the_box').html());
$('.slider-transition').children('.slider-transition').unwrap();
$('video').trigger('play');
clearInterval(animWatch);
}
}, 10);
});
// $('#holder').load(function(){ var imgcount = $('#holder img').length; $('#holder img').load(function(){ imgcount--; if (imgcount == 0) { /* now they're all loaded, let's display them! */ } }); });
$('.the_box').load(href + ' .slider-transition', function() {
var svgDoc = $('.ccs svg');
$(this).addClass('loaded');
$('.woocommerce-product-gallery').each(function() {
$(this).wc_product_gallery();
});
slideShowInit();
initParalax();
});
Even with the interval being 10 (or even 1), the pause will occur at completely different times and can't seem to catch it at the correct moment so I figure my best bet is to convert the svg into jQuery so that I have better control of it, is there an easy way of doing this or do I have to learn up on how to do it?

If I understand correctly what you want to achieve, the first animation for each path should run immediately, and the second only when the new page has loaded. If that is the case, you can do this explicitly.
Set an id="reveal" and begin="indefinite" for the earliest of the second animations, and start it with $('#reveal')[0].beginElementAt(). The other two animations can then be started with relative begin times: begin="reveal.begin+0.1s".
<svg class="svg_el" viewbox="0 0 100 100" preserveaspectratio="none">
<path class="overlay_path">
<animate attributeName="d" values="..." dur="0.4s" fill="freeze"></animate>
<animate attributeName="d" values="...." dur="0.4s" begin="reveal.begin+0.2s" fill="freeze"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="..." dur="0.4s" begin="0.1s" fill="freeze"></animate>
<animate attributeName="d" values="" dur="0.4s" begin="reveal.begin+0.1s" fill="freeze"></animate>
</path>
<path class="overlay_path">
<animate attributeName="d" values="" dur="0.4s" begin="0.2s" fill="freeze"></animate>
<animate id="reveal" attributeName="d" values="..." dur="0.4s" begin="indefinite" fill="freeze"></animate>
</path>
</svg>
For the start time of the second group of animations you now need to wait for the load event. If the first group of animations is still running, you can delay the start time for the second. The beginEvent triggers the other actions.
$('.the_box').removeClass('loaded');
var svgLoad = $.Deferred(), sliderLoad = $.Deferred();
// first animations start immediatly after svg load
$('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', svgLoad.resolve);
$('.the_box').load(href + ' .slider-transition', sliderLoad.resolve);
// wait for both load events
$.when(svgLoad, sliderLoad).then(function() {
var svgDoc = $('.ccs svg');
// delay start time of second animations if load is earlier than 0.53s
var startTime = Math.max(0.53, svgDoc[0].getCurrentTime());
var reveal = $('#reveal');
// link DOM change and video play to animation beginEvent
reveal.on('beginEvent', function () {
$('.the_box').siblings('.slider-transition').html($('.the_box').html());
$('.slider-transition').children('.slider-transition').unwrap();
$('video').trigger('play');
});
reveal[0].beginElementAt(startTime);
$(this).addClass('loaded');
$('.woocommerce-product-gallery').each(function() {
$(this).wc_product_gallery();
});
slideShowInit();
initParalax();
});

AnimeJS Progressive Fill of an SVG path

I have an SVG with different paths, and I want to animate the "fill" of these paths so it looks like it's being "hand drawn".
So far i Feel like I'm pretty close using the "strokeDashoffset" of anime.js, but I don't want the "borders" to be animated, I want the inside
Here's what I have :
JS :
var cssSelector = anime({
targets: '#cssSelector .lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: false
});
SVG/html
<div id="cssSelector">
<svg
width="100%"
height="auto"
viewBox="0 0 122.84119 21.053778">
<g
transform="translate(-44.718109,-94.290359)">
<g
fill="#FFF" fill-rule="evenodd" stroke="currentColor" stroke-width="0.1" class="lines" stroke-linecap="round"
id="text12">
<path
d="m 44.718109,95.475692 h 1.439333 v 19.755558 h -1.439333 z"
style=""
id="path14" />
<path
d="m 59.899459,114.29991 q -0.536222,0.508 -1.354666,0.79023 -0.790222,0.254 -1.665111,0.254 -1.919111,0 -2.963334,-1.04423 -1.044222,-1.07244 -1.044222,-2.96333 v -9.62378 h -2.709333 v -1.21355 h 2.709333 v -3.217336 h 1.411111 v 3.217336 h 4.684889 v 1.21355 h -4.684889 v 9.48267 q 0,1.43933 0.677334,2.20133 0.705555,0.73378 2.060222,0.73378 1.382889,0 2.286,-0.81844 z"
style=""
id="path16" />
<path
d="m 97.978291,95.475692 -6.688667,19.755558 h -1.524 L 83.641402,97.507692 77.488958,115.23125 h -1.524 L 69.24807,95.475692 h 1.523999 l 6.011334,17.779998 6.180666,-17.779998 h 1.382889 l 6.152444,17.808218 6.067778,-17.808218 z"
style=""
id="path18" />
<path
d="m 106.30297,115.34414 q -2.08845,0 -3.78178,-0.95956 -1.66511,-0.95956 -2.624668,-2.65289 -0.959556,-1.72155 -0.959556,-3.86644 0,-2.14489 0.959556,-3.83822 0.959558,-1.72156 2.624668,-2.68112 1.69333,-0.95955 3.78178,-0.95955 2.08844,0 3.75355,0.95955 1.69333,0.95956 2.65289,2.68112 0.95956,1.69333 0.95956,3.83822 0,2.14489 -0.95956,3.86644 -0.95956,1.69333 -2.65289,2.65289 -1.66511,0.95956 -3.75355,0.95956 z m 0,-1.27 q 1.69333,0 3.01977,-0.79023 1.35467,-0.79022 2.11667,-2.20133 0.79022,-1.41111 0.79022,-3.21733 0,-1.80622 -0.79022,-3.21734 -0.762,-1.41111 -2.11667,-2.20133 -1.32644,-0.79022 -3.01977,-0.79022 -1.69334,0 -3.048,0.79022 -1.32645,0.79022 -2.11667,2.20133 -0.762,1.41112 -0.762,3.21734 0,1.80622 0.762,3.21733 0.79022,1.41111 2.11667,2.20133 1.35466,0.79023 3.048,0.79023 z"
style=""
id="path20" />
<path
d="m 119.37382,103.71658 q 0.67733,-1.60867 2.11667,-2.45533 1.43933,-0.87489 3.49955,-0.87489 v 1.38289 l -0.33866,-0.0282 q -2.45534,0 -3.83823,1.55222 -1.38288,1.524 -1.38288,4.26155 v 7.67645 h -1.41112 v -14.732 h 1.35467 z"
style=""
id="path22" />
<path
d="m 134.12743,107.35725 -3.83822,3.49955 v 4.37445 h -1.41112 V 94.290359 h 1.41112 v 14.816661 l 9.42622,-8.60777 h 1.80622 l -6.35,5.95489 6.97089,8.77711 h -1.74978 z"
style=""
id="path24" />
<path
d="m 148.75404,115.34414 q -1.778,0 -3.38667,-0.53623 -1.60866,-0.53622 -2.51177,-1.35466 l 0.64911,-1.12889 q 0.90311,0.762 2.31422,1.27 1.43933,0.508 2.99155,0.508 2.22956,0 3.27378,-0.73378 1.07245,-0.73378 1.07245,-2.032 0,-0.93133 -0.59267,-1.46756 -0.56444,-0.53622 -1.41111,-0.79022 -0.84667,-0.254 -2.34245,-0.53622 -1.74977,-0.31044 -2.82222,-0.67733 -1.07244,-0.36689 -1.83444,-1.18534 -0.762,-0.81844 -0.762,-2.25777 0,-1.74978 1.43933,-2.87867 1.46756,-1.15711 4.14867,-1.15711 1.41111,0 2.794,0.39511 1.38289,0.39511 2.25778,1.04422 l -0.64912,1.12889 q -0.90311,-0.64911 -2.06022,-0.98778 -1.15711,-0.33866 -2.37066,-0.33866 -2.06023,0 -3.10445,0.762 -1.04422,0.762 -1.04422,2.00377 0,0.98778 0.59267,1.55223 0.59266,0.53622 1.43933,0.81844 0.87489,0.254 2.42711,0.56444 1.72156,0.31045 2.76578,0.67734 1.07244,0.33866 1.80622,1.12889 0.73378,0.79022 0.73378,2.17311 0,1.83444 -1.524,2.93511 -1.524,1.10067 -4.28978,1.10067 z"
style=""
id="path26" />
<path
d="m 165.55552,95.475692 h 1.63689 l -0.28222,14.082888 h -1.07245 z m 0.81845,19.868448 q -0.47978,0 -0.81845,-0.33867 -0.33866,-0.33867 -0.33866,-0.81845 0,-0.47977 0.33866,-0.81844 0.33867,-0.33867 0.81845,-0.33867 0.508,0 0.84666,0.33867 0.33867,0.33867 0.33867,0.81844 0,0.47978 -0.33867,0.81845 -0.33866,0.33867 -0.84666,0.33867 z"
style=""
id="path28" />
</g>
</g>
</svg>
</div>
And here's the result (after the animation)
My first idea was to draw the stroke inside of the element with a big "stroke-width", but appearently there's nothing to do so.
Thanks for your help and sorry for bad english :)

Apparently there is no way to do it with pure CSS. ended up following this tutorial and it worked Great
https://medium.com/#anatacreative/handwriting-animation-with-svg-638931410cfa

jQuery/Svg : increment value "dur" when key is pressed

I would like to increase the speed of my element #Object when I press a key.
The HTML code:
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FF6600">
<animateTransform id="object" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="3s" repeatCount="indefinite" />
</path>
The Script:
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode == "38") {
var getTheSpeed = parseInt(document.getElementById("object").dur, 10);
getTheSpeed = isNaN(getTheSpeed) ? 3 : getTheSpeed;
getTheSpeed++;
document.getElementById("object").dur = getTheSpeed;
}
}
My problem is that dur doesn't only take a number value. The seconds "s" must be specified. So, I cannot actually use isNaN property :(
I'm a beginner in JavaScript ^^'
Anyone have a solution to run this script?
Ty <3

change the following lines
var getTheSpeed = parseInt(document.getElementById("object").getAttribute("dur").slice(0,-1), 10);
(this will remove the s from the current value of "dur" using slice(0,-1))
and
document.getElementById("object").setAttribute("dur",String(getTheSpeed) + "s");
(this will set the new incremented value with an s added to it using string concatenation + "s")
Check this out--hope it helps^^
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode == "38") {
var getTheSpeed = parseInt(document.getElementById("object").getAttribute("dur").slice(0, -1), 10);
getTheSpeed = isNaN(getTheSpeed) ? 3 : getTheSpeed;
getTheSpeed++;
document.getElementById("object").setAttribute("dur", String(getTheSpeed) + "s");
alert(document.getElementById("object").getAttribute("dur"));
}
}
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FF6600">
<animateTransform id="object" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="3s" repeatCount="indefinite" />
</path>

Categories