We Keep Coding

How do I get a style property value from an SVG element that is animated using transform?

If I have an SVG element that is animated using transform, either using SMIL or CSS, how do I get the computed style of the property that is animated?
Here I have a <rect> that rotates, but as you can see the rotate property just returns none:
var rect1 = document.getElementById('rect1');
setTimeout(function(){
let rectStyle = getComputedStyle(rect1);
console.log(rectStyle.rotate);
}, 200);
<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
<rect id="rect1" x="1" y="1" width="2" height="2" fill="red">
<animateTransform attributeName="transform"
attributeType="XML" type="rotate"
values="0 2 2; 360 2 2" dur="10s"
repeatCount="indefinite"/>
</rect>
</svg>
var rect1 = document.getElementById('rect1');
setTimeout(function(){
let rectStyle = getComputedStyle(rect1);
console.log(rectStyle.rotate);
}, 200);
#rect1 {
transform-origin: center;
animation-name: rotate;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
<rect id="rect1" x="1" y="1" width="2" height="2" fill="red" />
</svg>

In the case of a SMIL animation just read off the SMIL values if you want to.
var rect1 = document.getElementById('rect1');
setTimeout(function(){
let a = rect1.transform.animVal[0].matrix.a;
let b = rect1.transform.animVal[0].matrix.b;
let angle = Math.atan2(b, a) * (180/Math.PI);
console.log(angle);
}, 200);
<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
<rect id="rect1" x="1" y="1" width="2" height="2" fill="red">
<animateTransform attributeName="transform"
attributeType="XML" type="rotate"
values="0 2 2; 360 2 2" dur="10s"
repeatCount="indefinite"/>
</rect>
</svg>

In the case of a CSS animation you can use transform instead of rotate but you get something like matrix(....). to get the exact value you need similar to this article .
var rect1 = document.getElementById('rect1');
setTimeout(function(){
let rectStyle = getComputedStyle(rect1);
let values = rectStyle.transform.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
let a = values[0];
let b = values[1];
let c = values[2];
let d = values[3];
var angle = Math.atan2(b, a) * (180/Math.PI);
console.log(angle);
}, 200);
#rect1 {
transform-origin: center;
animation-name: rotate;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<svg id="svg" width="200" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg">
<rect id="rect1" x="1" y="1" width="2" height="2" fill="red" />
</svg>

How to rotate SVG Oval text along with path

I'm trying to rotate the SVG text path alone with an oval path like the moving text forward not
I tried but the current CSS is rotating the whole text and I'm trying is moving forward each text to next
svg {
overflow: visible !important;
padding:50px;
}
svg text{
-webkit-animation: loading 8s linear infinite;
-moz-animation: loading 8s linear infinite;
transform-origin: center
}
#-webkit-keyframes loading {
100%{
webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#-moz-keyframes loading {
100%{
moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<svg class="Oval_text_svg" width="400" fill="#C3A97E" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 746">
<defs>
<pattern id="img1_ad77a587-4b9f-4d4a-9ef6-976c76e4841d" patternUnits="userSpaceOnUse" width="610" height="915">
<image href="https://via.placeholder.com/728x890.png" x="0" y="0"></image>
</pattern>
</defs>
<path fill="url(#img1_ad77a587-4b9f-4d4a-9ef6-976c76e4841d)" id="Oval_text" d="M 255.5 745.5 C 246.8091888427734 745.5 238.0447235107422 744.8538818359375 229.4499053955078 743.5796508789062 C 220.9792785644531 742.3237915039062 212.4674530029297 740.42724609375 204.1510009765625 737.9429321289062 C 187.7884521484375 733.0548095703125 171.6926422119141 725.7604370117188 156.310546875 716.2623901367188 C 141.2030944824219 706.933837890625 126.6308212280273 695.3866577148438 112.9986343383789 681.9414672851562 C 99.49217987060547 668.620361328125 86.79063415527344 653.3209228515625 75.24672698974609 636.46826171875 C 63.70054626464844 619.6121826171875 53.21763610839844 601.0636596679688 44.08917999267578 581.3378295898438 C 34.87191009521484 561.4202880859375 26.95518112182617 540.1268920898438 20.5587272644043 518.0492553710938 C 14.04345417022705 495.5616455078125 9.039545059204102 472.0283508300781 5.685999870300293 448.1030883789062 C 2.244818210601807 423.552734375 0.5 398.2844543457031 0.5 373 C 0.5 347.7155456542969 2.244818210601807 322.447265625 5.685999870300293 297.8969116210938 C 9.039545059204102 273.9716491699219 14.04345417022705 250.4383697509766 20.5587272644043 227.9507293701172 C 26.95518112182617 205.8730926513672 34.87191009521484 184.5797271728516 44.08917999267578 164.6621856689453 C 53.21763610839844 144.9363708496094 63.70054626464844 126.3878173828125 75.24672698974609 109.5317306518555 C 86.79063415527344 92.67909240722656 99.49217987060547 77.379638671875 112.9986343383789 64.05854797363281 C 126.6308212280273 50.61336517333984 141.2030944824219 39.06618118286133 156.310546875 29.73763656616211 C 171.6926422119141 20.23954582214355 187.7884521484375 12.94518184661865 204.1510009765625 8.057090759277344 C 212.4674530029297 5.572727203369141 220.9792785644531 3.676181793212891 229.4499053955078 2.420363664627075 C 238.0447235107422 1.146090865135193 246.8091888427734 0.5 255.5 0.5 C 264.1908264160156 0.5 272.9552612304688 1.146090865135193 281.5500793457031 2.420363664627075 C 290.0207214355469 3.676181793212891 298.5325317382812 5.572727203369141 306.8489990234375 8.057090759277344 C 323.2115478515625 12.94518184661865 339.307373046875 20.23954582214355 354.689453125 29.73763656616211 C 369.7969055175781 39.06618118286133 384.3691711425781 50.61336517333984 398.0013732910156 64.05854797363281 C 411.5078125 77.379638671875 424.2093505859375 92.67909240722656 435.7532653808594 109.5317306518555 C 447.2994689941406 126.3878173828125 457.7823486328125 144.9363708496094 466.9108276367188 164.6621856689453 C 476.1280822753906 184.5797271728516 484.0448303222656 205.8730926513672 490.4412841796875 227.9507293701172 C 496.95654296875 250.4383697509766 501.96044921875 273.9716491699219 505.3139953613281 297.8969116210938 C 508.7551879882812 322.447265625 510.5 347.7155456542969 510.5 373 C 510.5 398.2844543457031 508.7551879882812 423.552734375 505.3139953613281 448.1030883789062 C 501.96044921875 472.0283508300781 496.95654296875 495.5616455078125 490.4412841796875 518.0492553710938 C 484.0448303222656 540.1268920898438 476.1280822753906 561.4202880859375 466.9108276367188 581.3378295898438 C 457.7823486328125 601.0636596679688 447.2994689941406 619.6121826171875 435.7532653808594 636.46826171875 C 424.2093505859375 653.3209228515625 411.5078125 668.620361328125 398.0013732910156 681.9414672851562 C 384.3691711425781 695.3866577148438 369.7969055175781 706.933837890625 354.689453125 716.2623901367188 C 339.307373046875 725.7604370117188 323.2115478515625 733.0548095703125 306.8489990234375 737.9429321289062 C 298.5325317382812 740.42724609375 290.0207214355469 742.3237915039062 281.5500793457031 743.5796508789062 C 272.9552612304688 744.8538818359375 264.1908264160156 745.5 255.5 745.5 Z" stroke="none"></path>
<text dy="-10">
<textPath xlink:href="#Oval_text" class="svg_title">#Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text #Text </textPath>
</text>
</svg>

If you need to animate separate elements containing text like illustrated in your gif:
css offset-path might be an option.
The actual motion path is defined by offset-path property
Css: ellipse motion path
offset-path: path('M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z');
svg {
overflow: visible;
height: 90vmin;
display: inline-block;
}
text {
font-size: 10px;
}
.textLabel {
offset-path: path('M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z');
offset-distance: 0%;
offset-rotate: 0deg;
animation: rotate1 3s linear infinite forwards;
}
.textLabel2 {
offset-distance: 50%;
animation-name: rotate2;
}
#keyframes rotate1 {
to {
offset-distance: 100%;
}
}
#keyframes rotate2 {
to {
offset-distance: 150%;
}
}
<svg class="Oval_text_svg" width="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 75">
<!-- optional: show motion path -->
<path stroke="#ccc" stroke-width="1" fill="none" id="oval" d="M 50 37.5 C 50 58.2 38.8 75 25 75 C 11.2 75 0 58.2 0 37.5 C 0 16.8 11.2 0 25 0 C 38.8 0 50 16.8 50 37.5 Z" /> <g class="textLabel">
<circle cx="0" cy="0" r="10%" fill="red" />
<text fill="#fff" x="0" y="0" text-anchor="middle" dominant-baseline="central">
01
</text>
</g>
<g class="textLabel textLabel2">
<circle cx="0" cy="0" r="10%" fill="red" />
<text fill="#fff" x="0" y="0" text-anchor="middle" dominant-baseline="central">
02
</text>
</g>
</svg>
Changing offset-distance values will allow you to change offsets along the motion path (e.g offset-distance: 50% for the second element).

how to make svg curve at one end

im using svg for circular progress bar , i want to make one end curve not the both end . how is this possible ?
how can i implement one end curve in svg?
svg {
height: 80vh;
margin: 10vh auto;
border: 1px solid red;
display: block;
transform: rotate(-90deg);
}
svg circle {
stroke-width: 10;
fill: transparent;
}
#outer {
stroke: lightgrey;
}
#inner {
stroke: blue;
animation: value 2.5s linear forwards;
stroke-linecap: round;
}
#keyframes value {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 90 100;
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="outer" cx="50" cy="50" r="40" />
<circle id="inner" pathLength="100" cx="50" cy="50" r="40" />
</svg>

The easiest way would be to mask the starting point of the blue circle.
For this you will need a <mask> like so:
<mask id="m">
<rect width="100" height="100" fill="white"/>
<rect x="85" y="40" width="10" height="10" />
</mask>
Please observe that the first rectangle is white and it covers the whole chart. (Everything under a white pixel will be visible). The smaller rectangle is black and covers the starting point of the blue circle. Everything under a black pixel will be invisible.
svg {
height: 80vh;
margin: 10vh auto;
border: 1px solid red;
display: block;
transform: rotate(-90deg);
}
svg circle {
stroke-width: 10;
fill: transparent;
}
#outer {
stroke: lightgrey;
}
#inner {
stroke: blue;
animation: value 2.5s linear forwards;
stroke-linecap: round;
}
#keyframes value {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 90 100;
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="m">
<rect width="100" height="100" fill="white"/>
<rect x="85" y="40" width="10" height="10" />
</mask>
<circle id="outer" cx="50" cy="50" r="40" />
<circle id="inner" pathLength="100" cx="50" cy="50" r="40" mask="url(#m)" />
</svg>

Try this code:
svg {
height: 80vh;
margin: 10vh auto;
border: 1px solid red;
display: block;
transform: rotate(-90deg);
border-top-right-radius: 20px;
}
svg circle {
stroke-width: 10;
fill: transparent;
}
#outer {
stroke: lightgrey;
}
#inner {
stroke: blue;
animation: value 2.5s linear forwards;
stroke-linecap: round;
}
#keyframes value {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 90 100;
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="outer" cx="50" cy="50" r="40" />
<circle id="inner" pathLength="100" cx="50" cy="50" r="40" />
</svg>

I came up with an alternative solution than enxaneta suggested. The problem with using a mask is that when your value goes over 96% or so, the circle isn't completely filled and the mask is revealed.
Instead, you can set a rounded progress line on top of another progress line that has flat endcaps. By rotating the rounded progress line by roughly 5 degrees, the flat end is revealed.
Here's how to do that in React Native with react-native-svg:
const radius = 60;
let myPercentage = 40;
const circleCircumference = 2 * Math.PI * radius;
const valueOffset = circleCircumference -
(circleCircumference * myPercentage * 0.98) / 100;
<Svg height={radius * 2 + 30} width={radius * 2 + 30}>
<G rotation={-90} originX={radius + 15} originY={radius + 15}>
// Background gray circle
<Circle
cx="50%"
cy="50%"
r={radius}
stroke="rgb(60, 60, 60)"
fill="transparent"
strokeWidth="10"
strokeDasharray={circleCircumference}
strokeLinecap="butt"
/>
// Background progress circle with flat ends
<Circle
cx="50%"
cy="50%"
r={radius}
stroke={"rgb(0, 51, 204)"}
fill="transparent"
strokeWidth="10"
strokeDasharray={circleCircumference}
strokeDashoffset={valueOffset}
strokeLinecap="butt"
/>
// Progress circle with round ends rotated by 5 degrees
<Circle
cx="50%"
cy="50%"
r={radius}
stroke={rgb(0, 51, 204)}
fill="transparent"
rotation={5}
originX={radius + 15}
originY={radius + 15}
strokeWidth="10"
strokeDasharray={circleCircumference}
strokeDashoffset={valueOffset}
strokeLinecap="round"
/>
</G>
</Svg>

How to do a vertical wave animation of a ribbon in svg?

My question is that I want to create a svg file (Code is mentioned below) like a vertical ribbon(which is already done), now I want to give a wave effect that will start from the top to the bottom and will be in continuous mode. But it isn't working.
#keyframes thread{
from {
stroke-dashoffset: 200;
opacity:.5;
}
to{
stroke-dashoffset: 2;
opacity:1;
}
}
.anime{
stroke-dasharray: 200;
animation: thread 2s .4s forwards infinite ease-in-out;
}
<div class="position-absolute">
<svg height="200" width="200" >
<g class="anime">
<path id="shape-1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="shape-2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
</div>

I think you're looking for something like this(correct me if I'm wrong):
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function(){
ribbon1.animate({ d: ribbon2Points }, 1000, toRibbon1);
}
var toRibbon1 = function(){
ribbon1.animate({ d: ribbon1Points }, 1000, toRibbon2);
}
toRibbon1();
h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
<path id="ribbon1" class="cls-1" d="M64.5,64.5c0,15-4,19-4,31a17.23,17.23,0,0,0,10,16h28s-11-8-11-17,1-16,1-30-1-25-1-25h-26S64.5,49.5,64.5,64.5Z" transform="translate(-58.85 -39)"/>
<path id="ribbon2" class="cls-1" d="M61,60c0,15,5.5,23.5,5.5,35.5s-6,16-6,16h28s5-4,5-13S85,76,85,62s2.5-22.5,2.5-22.5h-26S61,45,61,60Z" transform="translate(-58.85 -39)"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>
it probably requires some tweaking in the paths itself to make for a more realistic effect. Here it is specifically applied to your paths:
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function() {
ribbon1.animate({
d: ribbon2Points
}, 1000, toRibbon1);
}
var toRibbon1 = function() {
ribbon1.animate({
d: ribbon1Points
}, 1000, toRibbon2);
}
toRibbon1();
h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg height="200" width="200">
<g class="anime">
<path id="ribbon1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="ribbon2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>
Here's an extensive guide on how to make this (which I based my answer on). It's basically two SVG paths that morph into each other over time.

Can't get hamburger menu to animate on click

I targeted the SVG rect using :nth-chid(1), 2 and 3 and made a -> that I'm trying to trigger on click. Don't know what I'm doing wrong here. Any Help would be great thank you!
(function() {
var burger;
buger = document.getElementById('burger');
burger.addEventListener('click', function() {
console.log('you cliked the burger');
return burger.classList.toggle('st0-active');
});
}).call(this);
body {
max-width: 900px;
margin: 0 auto;
}
.st0-active:nth-child(1) {
-webkit-transform: rotate(27deg) translate(23px, -51px);
transform: rotate(27deg) translate(23px, -51px);
fill: #000;
}
.st0-active:nth-child(2) {
fill: #000;
}
.st0-active:nth-child(3) {
-webkit-transform: rotate(-21deg) translate(-48px, 15px);
transform: rotate(-21deg) translate(-48px, 15px);
fill: #000;
}
<body>
<svg class="mo-icon__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 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>
</body>
Here is a picture of my designed end goal
Which is the reason I'm using CSS Transforms and targeting the rect using nth-child Here is a link to the codepen that I'm currently working on
enter link description here

(function() {
var burger;
burger = document.getElementById('burger');
burger.addEventListener('click', function() {
console.log('you cliked the burger');
return burger.classList.toggle('st0-active');
});
}).call(this);
body {
max-width: 900px;
margin: 0 auto;
}
#burger > g > rect{
transition: transform 1s;
}
.st0-active > g > rect:nth-child(1) {
-webkit-transform: rotate(27deg) translate(23px, -51px);
transform: rotate(27deg) translate(23px, -51px);
fill: #000;
}
.st0-active > g > rect:nth-child(2) {
fill: #000;
}
.st0-active > g > rect:nth-child(3) {
-webkit-transform: rotate(-21deg) translate(-48px, 15px);
transform: rotate(-21deg) translate(-48px, 15px);
fill: #000;
}
<body>
<svg class="mo-icon__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 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>
</body>
Try to add this code.
#burger{
transition: transform 1s;
}
Additionally
CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.