SVG animation acts funny in firefox - html

this is the code for the SVG animation.
This is the jsfiddle
#keyframes rotate {
100%{
transform: rotate(360deg);
}
}
#rotate {
transform-origin: 50% 50%;
transform-box: fill-box;
animation: rotate 3s linear infinite;
}
#rotate > rect {
transform: translate(12px, 12px);
}
<svg id="H1XgaUeE3lX" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 387">
<g id="rotate">
<rect x="50" width="100" height="20" y="50"/>
</g>
</svg>
the animation changes depending on which browser I open the code in.
it works fine in chrome but doesn't work in Firefox.
the axis of rotation changes depending on which brouser it is opened in.

Related

CSS - Animate only selected elements svg

I am trying to animate some elements of an image in svg. To test the animation I first tried to insert in the svg only the element to animate
in order to see if the animation works well, it is the case, here is the code :
HTML :
<svg xmlns="http://www.w3.org/2000/svg" width="244" height="149.388" viewBox="-15 -320 244 149.388">
<g id="off" transform="translate(-1090, -390)">
<g transform="translate(-28.904 -320.214)" >
<path id="note-double-1" d="M1114.926,434.328l5.138-22.688,22.647,1.41c-.05.226-.093.412-.133.6q-2.918,12.882-5.824,25.761a5.089,5.089,0,0,1-3.018,3.727,7.907,7.907,0,0,1-9.016-2.153c-2.277-2.776-1.476-6.41,1.8-7.774a7.7,7.7,0,0,1,8.184,1.341c.1.083.205.172.31.245h.067l3.237-14.3c-1.28-.081-2.527-.164-3.772-.245-4.355-.272-8.713-.535-13.066-.821-.412-.029-.524.113-.61.49-1.4,6.229-2.861,12.445-4.2,18.686a5.393,5.393,0,0,1-4.558,4.48,7.783,7.783,0,0,1-8.129-3.455,4.664,4.664,0,0,1,1.414-6.408,7.077,7.077,0,0,1,6.186-.777,8.54,8.54,0,0,1,1.767.758A17.8,17.8,0,0,1,1114.926,434.328Z"/>
</g>
</g>
</svg>
CSS :
#note-double-1 {
/*overflow: hidden;*/
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
But, when I add all the extra 'path' lines in the svg tag, nothing is displayed. To avoid too long message, here is a jsfiddle link :
https://jsfiddle.net/qsxjwm0u/2/
Thanks for your help,
Have a nice evening

How can I cut a hole in an SVG, making every <path> that goes over that hole transparent

Considering the following example:
path {
transform-origin: 50% 0%;
}
#keyframes path0 {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
#keyframes path1 {
0% {
transform: rotate(-30deg);
}
100% {
transform: rotate(30deg);
}
}
#keyframes path2 {
0% {
transform: rotate(40deg);
}
100% {
transform: rotate(-40deg);
}
}
.background--custom {
height: 100%;
width: 100%;
background-color: red;
}
<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="#D6D6D6" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path0 5s linear infinite alternate;" />
<path fill="#DEFFFF" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path1 5s linear infinite alternate;" />
<path fill="#DAFFF5" fill-opacity="1" d="M-100 -100L200 -100L200 20L-100 20Z" style="animation: path2 5s linear infinite alternate;" />
</svg>
This creates an animates SVG background. It looks like this:
Its simply a few lines that rotate.
The goal is to cut a rectangle hole in the whole SVG, causing a section of the SVG to be transparent. Considering the black rectangle would be the hole, it should look something like this:
Is this in any way possible? I have tried using mask elements but I dont see how I can apply those mask elements to the whole SVG and not just single path element.

Here I made a <mask> on a <g> element that has a white <rect> in the background and a black <rect> in the foreground. The black square makes the group transparent. The result is that you can see the red color in the background -- I don't know if that was the point?
path {
transform-origin: 50% 0%;
}
#keyframes path0 {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
#keyframes path1 {
0% {
transform: rotate(-30deg);
}
100% {
transform: rotate(30deg);
}
}
#keyframes path2 {
0% {
transform: rotate(40deg);
}
100% {
transform: rotate(-40deg);
}
}
.background--custom {
height: 100%;
width: 100%;
background-color: red;
}
<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<mask id="mask01">
<rect width="100" height="100" fill="white"/>
<rect width="60" height="60" x="20" y="40" fill="black"/>
</mask>
</defs>
<g mask="url(#mask01)">
<path fill="#D6D6D6" fill-opacity="1"
d="M-100 -100L200 -100L200 50L-100 50Z"
style="animation: path0 5s linear infinite alternate;" />
<path fill="#DEFFFF" fill-opacity="1"
d="M-100 -100L200 -100L200 50L-100 50Z"
style="animation: path1 5s linear infinite alternate;" />
<path fill="#DAFFF5" fill-opacity="1"
d="M-100 -100L200 -100L200 20L-100 20Z"
style="animation: path2 5s linear infinite alternate;" />
</g>
</svg>

Can't rotate svg element centered

I have this svg which I partially want to rotate. Therefore I use css animation, but I'm not able to rotate it in the center, but the whole object. How can I fix this?
FYI had to remove some part of the svg, since it was too long.
#rotate {
animation: rotate-right 4s infinite linear;
transform-origin: center;
}
#keyframes rotate-right {
0% {
transform: rotate(0deg) translate(679.766px, 239.372px);
}
100% {
transform: rotate(360deg) translate(708.51px, 256.835px);
}
}
<svg id="chaos-svg" xmlns="http://www.w3.org/2000/svg" width="933.574" height="507.132" viewBox="0 0 933.574 507.132">
<g transform="translate(-463.187 -167.118)">
<g transform="translate(679.766 239.372)" id="rotate">
<g transform="translate(0 0)">
<path
d="M842.956,559.215c-13.5-44.47-13.143-93.8,2.484-137.722,3.45-9.708,8.077-19.4,15.521-26.715,3.654-3.593,9.315-8.576,14.864-7.209,4.628,1.14,7.036,6.19,8.425,10.3a152.516,152.516,0,0,1,3.9,15.656q2.027,9.059,3.759,18.17,3.476,18.31,5.745,36.831a579.556,579.556,0,0,1,4.107,83.068c.815-.219,1.631-.438,2.446-.664-13-20.344-26.987-41.564-47.384-55.235a73.957,73.957,0,0,0-35.978-12.4,122.234,122.234,0,0,0-23.258.808c-3.223.377-6.484,1.1-9.723,1.253-1.8.083-3.993-.06-4.514-2.2-.415-1.683.423-3.91.928-5.5,4.265-13.528,15.483-23.681,25.259-33.374q16.328-16.181,33.3-31.7c22.835-20.948,46.388-41.1,70.3-60.8,26.957-22.209,54.382-43.844,81.815-65.456,1.215-.959-.332-2.733-1.593-2.068-23.318,12.274-33,41.005-29.7,66.022,4.2,31.917,25.062,58.073,45.037,81.981,12.252,14.675,24.677,29.32,34.189,45.98a1.381,1.381,0,0,0,2.514-1.057A357.32,357.32,0,0,1,1030.9,371.731c.091-6.907.272-13.754,2.174-20.442,1.525-5.382,4.129-11.3,9.066-14.373,6.454-4.008,13.6-.71,18.8,3.767,6.469,5.548,12.282,11.988,18.314,18l44.523,44.365c.551-.717,1.1-1.434,1.661-2.151-45.542-21.341-96.988-19.854-146.078-18.517-6.228.166-12.471.453-18.7.43-6.19-.015-12.931-.717-17.423-5.465-10.78-11.4,8.047-20.925,16.049-25.87a361.918,361.918,0,0,1,109.187-44.855c15.234-3.5,31.094-6.107,46.592-2.725-.31-.544-.619-1.095-.928-1.638-4.152,14.811-7.375,30.09-7,45.55.347,14.026,3.8,27.7,7.247,41.224,3.5,13.739,7.088,27.652,7.164,41.919.075,14.7-6.115,29.667-3.02,44.312,2.385,11.308,12.539,22.888,25.062,20.374-.513-.664-1.019-1.329-1.532-1.993a127.633,127.633,0,0,1-18.457,26.814,1.36,1.36,0,0,0,1.638,2.129,370.133,370.133,0,0,1,68.453-27.953c4.778-1.412,10.38-3.442,15.385-1.993,6.424,1.849,6.069,8.591,3.963,13.671-1.94,4.673-4.907,9.028-7.639,13.263q-4.054,6.284-8.538,12.274a225.011,225.011,0,0,1-95.055,73.164,218.37,218.37,0,0,1-123.877,11.55,225.482,225.482,0,0,1-60.776-21.25,216.494,216.494,0,0,1-27.214-16.849c-8.107-5.9-19.333-13.543-20.231-24.534-.5-6.054,2.453-11.671,5.367-16.759,2.506-4.378,5.262-8.606,8.175-12.72,5.971-8.409,12.622-16.306,19.333-24.134,12.954-15.113,26.482-30.165,35.729-47.943a112.161,112.161,0,0,0,5.843-13.309,1.316,1.316,0,0,0-1.917-1.472A436.809,436.809,0,0,0,818.12,568.417c-11.248,18.321-21.326,37.707-26.716,58.632-2.348,9.112-3.9,18.917.74,27.591,3.442,6.417,9.512,10.953,16.056,13.875,16.464,7.345,35.54,6.054,52.9,3.374,21.7-3.344,42.583-10.553,62.7-19.182,20.156-8.643,39.783-18.593,58.987-29.161a777.377,777.377,0,0,0,108.7-72.409q6.216-4.948,12.342-10.017c1.223-1.012-.34-2.619-1.578-2.046A323.02,323.02,0,0,0,965.429,657.486a1.3,1.3,0,0,0,0,1.321c4.809,7.307,13.829,8.847,22,8.394,10.7-.6,21.469-3.593,31.705-6.583,22.126-6.462,43.414-15.49,65.675-21.522a161.157,161.157,0,0,1,38.786-6.069c-.219-.815-.438-1.623-.664-2.438a273.81,273.81,0,0,1-106.719,29.169,284.469,284.469,0,0,1-109.345-14.094,268.26,268.26,0,0,1-29.237-11.806q-6.828-3.238-13.46-6.877c-2.295-1.253-14.177-6.824-10.161-10.6l-1.276.34a389.3,389.3,0,0,0,53.5,4.046,256.291,256.291,0,0,0,26.157-.793c5.594-.544,11.429-1.759,16.3-4.718,4.507-2.74,7.775-7.254,7.572-12.7-.249-6.605-5.239-11.874-10.312-15.528-11.187-8.047-25.123-11.723-38.779-11.98-14.343-.272-28.678,3.02-41.926,8.379-13.15,5.314-25.923,12.576-36.257,22.382-9.64,9.149-17.9,21.68-16.653,35.533,1.17,12.984,10.108,22.979,20.684,29.773,11.165,7.171,24.209,11.459,37.02,14.577a182.528,182.528,0,0,0,39.36,5.08A196.227,196.227,0,0,0,987.6,676.117a185.253,185.253,0,0,0,65.2-44.5c10.357-11.1,18.782-23.771,28.467-35.434,6.266-7.534,28.195-34.023,36.363-16.162,1.532,3.352,2.491,6.983,3.865,10.4q2.117,5.288,4.718,10.365a120.9,120.9,0,0,0,12.607,19.567c4.212,5.337,9.134,11.633,16.049,13.4,7.2,1.834,14.3-1.849,19.876-6.092,23.605-17.944,38.076-45.859,49.808-72.394,2.891-6.545,5.662-13.15,8.417-19.755-.672.272-1.351.551-2.023.823a124.9,124.9,0,0,1,34.249,30.943,1.453,1.453,0,0,0,1.91.5c4.809-2.257,5.563-7.9,5.088-12.659-.732-7.33-3-14.667-4.6-21.846-3.661-16.426-7.277-32.86-11.014-49.264-6.62-29.048-13.6-58.987-27.485-85.582-11.233-21.514-28.618-41.73-52.88-48.215-20.08-5.367-44.614-1.819-58.489,14.917-10.108,12.191-12.614,29.124-13.694,44.433a156.184,156.184,0,0,0,5.239,52.14c.491,1.782,2.929.981,2.688-.74-3.02-21.477-14.9-40.643-30.535-55.326-17.438-16.381-39.413-26.859-61.916-34.37-12.063-4.024-24.406-7.428-36.808-10.244-11.24-2.559-23.832-3.986-34.045,2.559a23.812,23.812,0,0,0-9.066,10.093c-.664,1.48-1.925,4.242-1.472,5.911.476,1.751,2.8,2.71,4.378,2.959,5.08.8,10.75-2.484,15.294-4.273q9.274-3.657,18.427-7.609a714.447,714.447,0,0,0,70.461-35.608c11.135-6.333,22.269-12.682,33.8-18.291,5.9-2.876,11.9-5.548,18.027-7.9,5.737-2.2,11.708-4.492,17.77-5.609,6.084-1.125,12.267.347,14.411,6.749,1.54,4.6,1.011,9.768.491,14.5a202.977,202.977,0,0,0-.551,40.907,156.81,156.81,0,0,0,2.748,19.114c.981,4.454,2.431,9.013,5.1,12.765a16.323,16.323,0,0,0,11.271,7.005c5.918.778,12.063-1.019,17.83-2.144q10.576-2.061,21.145-4.114c6.386-1.246,13.437-3.457,19.982-2.318,9.987,1.736,14.29,11.716,15.9,20.661,2.068,11.5.853,23.787-.151,35.329A295.891,295.891,0,0,1,1218,492.445q-2.231,9.67-5.1,19.167c.853-.113,1.706-.219,2.552-.332q-8.855-19.827-17.717-39.662c-4.9-10.961-9.3-22.632-16.97-32.022-15.06-18.442-40.228-17.936-60.006-28.18-8.983-4.65-17.461-11.686-20.057-21.884-2.869-11.293,2.785-22.405,10.417-30.445,7.919-8.341,19.619-16.17,31.335-17.272,12.841-1.208,21.7,9.21,27.478,19.385,12.033,21.2,11.5,47.007,5.126,69.888-3.5,12.584-8.651,24.632-14.32,36.378-.679,1.412-1.374,2.823-2.068,4.227-.823,1.668-1.366,2.536-3.193,3.133a14.516,14.516,0,0,1-8.7-.181c-5.692-1.729-10.644-5.677-14.72-9.9-16.668-17.249-28.021-39.126-37.609-60.889-4.952-11.233-9.466-22.654-14.086-34.03-3.873-9.527-7.655-19.461-14.5-27.319a29.745,29.745,0,0,0-27.47-10.168c-11.648,1.827-22,8.9-31.124,15.958-22.465,17.37-44.44,35.419-66.634,53.121q-8.085,6.454-16.177,12.9c.762.445,1.525.891,2.287,1.329q3.454-20.529,5.556-41.262c1.178-11.663,2.884-23.787,1.812-35.517-.74-8.123-2.937-17.317-9.632-22.654a17.874,17.874,0,0,0-4.431-2.6c-2.657-1.079-3.465-.408-5.956.921q-7.439,3.963-14.645,8.341a314.681,314.681,0,0,0-94.452,89.054,308.8,308.8,0,0,0-34.672,65.4,1.361,1.361,0,0,0,1.978,1.525c29.916-21.967,51.7-52.4,72.952-82.351-.815-.347-1.638-.687-2.453-1.034-17.3,54.714-34.936,111.6-32.188,169.669a215.438,215.438,0,0,0,7.511,47.573,1.336,1.336,0,0,0,2.612-.355,219.224,219.224,0,0,0-26.821-99.17c-2.891-5.269-9.074-14.411-16.162-9.965a1.325,1.325,0,0,0,.309,2.393,86.438,86.438,0,0,0,62.286-6.039l-1.336-2.287a877.78,877.78,0,0,1-87.575,48.864c.679.393,1.359.778,2.038,1.17-5.941-45.407,25.168-83.272,54.3-114.048a1022.383,1022.383,0,0,1,98.8-91.5c9.557-7.745,19.106-15.724,29.358-22.541,9.912-6.583,21.091-11.859,33.275-10.742-.325-.785-.649-1.563-.974-2.348q-9.534,8.923-19.061,17.853a1.385,1.385,0,0,0,.6,2.295,314.1,314.1,0,0,1,104.484,47.935q6.749,4.767,13.248,9.889c3.012,2.385,11.784,7.723,9.044,12.471h2.37a138.055,138.055,0,0,1-24.232-93.817c-.687.393-1.381.793-2.068,1.185,7.541,4.99,11.286,13.437,13.648,21.869,2.778,9.934,4.393,20.254,6.326,30.384q6.534,34.276,11.935,68.763,5.4,34.547,9.648,69.268c2.431,19.906,6.764,42.576-5.216,60.353-9.361,13.89-25.379,21.567-39.971,28.693-7.972,3.9-15.973,7.738-23.545,12.388a158.438,158.438,0,0,0-24.2,18.283c-13.278,12.191-27.727,29-25.349,48.388,1.963,16,15.724,27.591,30.445,32.083,19.083,5.828,39.345-.687,56.8-8.621,19.929-9.066,39.1-20,57.734-31.471q14.086-8.662,27.81-17.883c8.107-5.428,16.962-10.583,23.945-17.483,5.548-5.488,9.881-13.09,7.315-21.069-2.325-7.217-9.232-11.723-16.064-14.109-9.043-3.148-18.865-2.333-28.067-4.741-2.016-.528-5.835-1.2-6.719-3.178-1.057-2.37-1.442-5.375-1.94-7.9a103.726,103.726,0,0,1-1.842-16.66c-.755-21.7,3.88-43.013,6.3-64.46,2.121-18.812,2.657-38.575-3.367-56.768-5.782-17.476-17.891-31.079-33.5-40.537-16.607-10.063-35.434-15.234-54.012-20.291-10.289-2.8-20.593-5.624-30.588-9.368-9.338-3.5-18.872-7.685-26.474-14.29-6.937-6.032-12.478-14.63-10.432-24.187,1.887-8.81,9.028-16.011,16.66-20.322,13.324-7.526,30.482-7.511,44.2-1a42.717,42.717,0,0,1,16.872,14.048c.385-.672.77-1.336,1.155-2.008q-19.34-1.936-38.673-3.88c-12.584-1.261-25.191-2.484-37.85-2.612-22.858-.234-45.21,3.993-65.554,14.667a126.771,126.771,0,0,0-29.176,21.152c-1.064,1.027.362,3.012,1.623,2.1,20.722-15,42.5-29.124,66.355-38.612a156.2,156.2,0,0,1,35.487-9.753c12.342-1.766,25.613-2.106,37.8.891,13.007,3.193,27.108,13.731,24.556,28.844.43-.332.861-.657,1.3-.989-22.1.528-40.568-13.747-59.712-22.715a120.8,120.8,0,0,0-99.781-1c.445.762.891,1.517,1.329,2.28,21.733-16.177,46.365-29.131,73.1-34.521,24.617-4.967,50.781-2.838,73.609,8a92.98,92.98,0,0,1,31.818,24.436c.43-.747.868-1.487,1.3-2.234-45.784-14.124-97.388-7.723-138.243,17.378-9.595,5.9-19.152,12.826-25.289,22.465-6.635,10.425-7.632,22.858-5.631,34.815,2.189,13.044,7.451,25.3,12.3,37.518q7.734,19.453,14.086,39.428,7.168,22.533,12.554,45.58c1.827,7.821,6.182,26.2-5.881,28.346.415.113.838.219,1.253.332a503.385,503.385,0,0,1-62.233-81.807c-4.318-7.088-8.817-14.23-12.252-21.8-3.329-7.345-6.039-16.524-2.2-24.209,6.779-13.558,25.991-12.274,38.7-12.5q31.83-.566,63.667-1.125a1.22,1.22,0,0,0,0-2.438c-24.322.43-48.683.551-73,1.306-8.115.249-17,1-24.028,5.458-7.473,4.726-10.561,13.1-9.361,21.7,1.449,10.365,7.277,19.642,12.486,28.5q8.492,14.437,17.936,28.286a504.042,504.042,0,0,0,40.907,52.238q2.638,2.944,5.322,5.85c1.547,1.676,2.25,3.125,4.612,2.476a10.774,10.774,0,0,0,6.673-5.647c3.4-6.651,2.34-14.811.762-21.794a599.294,599.294,0,0,0-19.536-67.638c-3.873-10.946-8.266-21.68-12.44-32.513-4.024-10.44-7.79-21.31-8.56-32.558-.755-11.074,1.993-21.839,9.074-30.528,6.469-7.941,15.188-13.822,23.945-18.97a168.74,168.74,0,0,1,118.887-19.385c4.982,1.042,9.9,2.333,14.773,3.835,1.381.423,2.1-1.276,1.3-2.234-15.875-19.129-39.307-30.618-63.652-34.347-26.436-4.054-53.227,1.276-77.5,12.01a212.23,212.23,0,0,0-40.59,24.036,1.32,1.32,0,0,0,1.329,2.28,118.526,118.526,0,0,1,66.128-8.455,116.269,116.269,0,0,1,31.366,9.67c9.481,4.476,18.464,9.934,27.916,14.471,10.289,4.944,21.212,8.7,32.762,8.432a1.368,1.368,0,0,0,1.3-.989c1.985-11.738-5.428-22.579-15.483-28.021-11.5-6.22-25.726-6.847-38.514-6.175-26.587,1.4-51.876,11.384-74.885,24.27a405.3,405.3,0,0,0-39.254,25.53c.543.7,1.079,1.4,1.623,2.1a124.132,124.132,0,0,1,55.318-31c23.364-5.986,47.664-4.167,71.4-1.827q21.322,2.106,42.644,4.273a1.341,1.341,0,0,0,1.155-2.008c-17.091-24.473-58.179-27.7-77.006-3.45-5.239,6.749-7.7,15.339-4.854,23.628,2.733,7.972,9.157,14.131,15.989,18.759,8.168,5.526,17.612,9.255,26.889,12.463,10.1,3.488,20.442,6.19,30.739,9.021,18.593,5.118,37.412,10.863,53.408,21.99a72.126,72.126,0,0,1,19.7,19.944,74.542,74.542,0,0,1,10.191,26.459c7.9,41.383-11.2,82.426-4.529,123.839q.645,4.008,1.638,7.949c.543,2.144.679,4.786,2.748,5.888,4.212,2.25,9.081,3.193,13.754,3.842,9.1,1.261,18.547,1.208,26.715,5.956,7.919,4.6,11.769,13.18,6.968,21.6s-14.147,13.686-21.907,18.97c-18.215,12.4-36.816,24.27-56.005,35.117-9.564,5.413-19.272,10.584-29.146,15.407-9.738,4.763-19.755,9.134-30.339,11.64-18.14,4.3-38.439,1.8-51.514-12.667a31.234,31.234,0,0,1-8.183-23.907c.936-10.259,6.6-19.612,13.06-27.372,12.78-15.339,29.471-27.433,47.158-36.484,14.6-7.473,30.324-13.694,42.855-24.557a51.6,51.6,0,0,0,14.041-18.849c3.88-9.247,4.439-19.453,3.873-29.35-.634-11.036-2.257-22.043-3.638-33q-2.163-17.109-4.6-34.189-4.9-34.3-10.931-68.415-3.057-17.3-6.409-34.559c-1.849-9.512-3.3-19.325-6.59-28.474-2.635-7.33-6.688-14.041-13.294-18.412a1.391,1.391,0,0,0-2.068,1.185,140.345,140.345,0,0,0,24.6,95.206,1.391,1.391,0,0,0,2.37,0c2.083-3.616.015-7.315-2.589-10.04-3.231-3.374-7.315-6.145-11.021-8.983Q1053,369.5,1039.755,361.3a315.411,315.411,0,0,0-89.205-37.676c.2.762.408,1.532.6,2.295q9.534-8.923,19.061-17.853a1.393,1.393,0,0,0-.974-2.348c-21.454-1.963-39.526,14.169-55.19,26.565q-27.357,21.65-53.2,45.135-25.647,23.3-49.672,48.313c-15.445,16.079-30.9,32.566-42.644,51.627-12.81,20.782-20.971,45.331-17.732,69.94a1.377,1.377,0,0,0,2.038,1.17,880.124,880.124,0,0,0,87.544-48.917,1.325,1.325,0,0,0-1.336-2.287,83.627,83.627,0,0,1-60.248,5.805c.106.8.211,1.593.31,2.393,6.749-4.227,12.516,8.817,14.766,13.128a213,213,0,0,1,9.791,21.665,218.278,218.278,0,0,1,12.056,45.2,215.5,215.5,0,0,1,2.4,26.9c.868-.121,1.736-.234,2.612-.355-15.536-55.854-4.877-114.32,10.493-168.959,4.424-15.717,9.285-31.305,14.215-46.871.483-1.532-1.615-2.212-2.453-1.034-20.963,29.539-42.478,59.7-71.994,81.377.657.506,1.321,1.012,1.978,1.525a311.248,311.248,0,0,1,116.4-145.482,301.478,301.478,0,0,1,26.859-16.064c1.313-.695,1.5-.944,2.861-.385a15.537,15.537,0,0,1,2.6,1.374,16.731,16.731,0,0,1,4.635,4.665,30.883,30.883,0,0,1,4.356,11.4c2.333,11.822.483,24.4-.627,36.257q-2.117,22.647-5.911,45.1a1.38,1.38,0,0,0,2.287,1.329Q961.2,388.474,995.98,360.74c17.325-13.814,45.89-39.692,66.966-17.423,7.926,8.379,11.852,19.944,16.094,30.43,4.643,11.467,9.232,22.964,14.3,34.249a274.137,274.137,0,0,0,17.264,33.079c6.281,10.063,13.52,20.473,22.45,28.384,4.129,3.661,9.028,6.968,14.486,8.2,3.759.845,10.606,1,12.728-2.929a222.282,222.282,0,0,0,15.611-36.68c7.428-22.9,9.647-48.358.075-71-4.182-9.881-11.112-21.182-21.159-25.968-10.969-5.231-23.515-.2-33.072,5.8-9.217,5.782-17.649,13.958-21.929,24.111-4.069,9.655-3.276,20.54,2.891,29.131,13.6,18.94,38.96,19.536,58.534,28.323a48.025,48.025,0,0,1,14.766,9.889,62.772,62.772,0,0,1,10.825,15.951c6.349,12.546,11.678,25.681,17.408,38.514q4.427,9.919,8.855,19.831c.513,1.155,2.235.725,2.552-.332a301.07,301.07,0,0,0,12.614-77.482c.483-16.094-1.4-42.44-23.228-42.213-6.213.068-12.463,1.8-18.533,2.974l-20.14,3.918c-6.084,1.185-13.256,3.525-19.318,1.2-4.8-1.842-7.624-6.447-9.285-11.089-1.978-5.518-2.778-11.467-3.533-17.257a191.988,191.988,0,0,1-1.54-20.072,194.547,194.547,0,0,1,.543-20.125c.43-5.45,1.442-10.931,1.223-16.411-.166-4.152-1.057-8.538-3.956-11.7-3.427-3.737-8.5-4.461-13.309-3.812-5.729.778-11.376,2.906-16.781,4.892-5.654,2.076-11.21,4.424-16.668,6.96-22.865,10.614-44.146,24.3-66.475,35.948q-17.359,9.047-35.246,17.023-9.217,4.11-18.57,7.919-4.3,1.755-8.636,3.442a57.252,57.252,0,0,1-8.6,3.1,7.585,7.585,0,0,1-3.918.091c-1.5-.513-1.344-1.17-.959-2.559a17.9,17.9,0,0,1,4-7.1,25.554,25.554,0,0,1,13.294-7.572c12.758-2.929,26.648,1.917,38.907,5.2,23.749,6.364,47.46,14.554,67.857,28.61,17.763,12.244,33,29.509,40.2,50.079a79.9,79.9,0,0,1,3.714,15.385c.9-.249,1.789-.491,2.688-.74a153.639,153.639,0,0,1-5.458-44.637c.37-14.267,1.932-30.165,8.938-42.885,10.478-19.016,33.743-25.349,54.058-21.854,23.869,4.107,41.775,21.612,53.657,41.851,13.928,23.726,21.137,51.038,27.531,77.572,4.039,16.774,7.677,33.645,11.429,50.487q2.9,13.01,5.805,26.021c1.147,5.163,4.159,14.849-2.212,17.838l1.91.5a128.128,128.128,0,0,0-35.268-31.917,1.4,1.4,0,0,0-2.023.823c-7.466,17.944-15.06,35.94-25.04,52.661a158.741,158.741,0,0,1-16.759,23.379c-6.273,7.156-13.709,15.2-22.556,19.091-5.126,2.257-10.508,2.2-15.219-1-4.084-2.77-7.3-6.945-10.312-10.795a117.819,117.819,0,0,1-15.49-26.27c-1.842-4.318-3.05-8.915-5.02-13.173-1.623-3.518-4.3-6.515-8.259-7.247-8.734-1.623-17.023,6.764-22.631,12.29-13.981,13.754-24.089,30.807-37.344,45.2a177.633,177.633,0,0,1-40.228,32.415,193.765,193.765,0,0,1-98.694,26.851,178.847,178.847,0,0,1-51.1-7.5c-15.853-4.786-34.144-12.086-42.817-27.206-10.093-17.6.876-36.174,14.433-48.041,14.147-12.388,32.422-20.986,50.676-25.206,17.989-4.159,37.609-3.744,54.193,5.088,7.315,3.9,18.533,11.618,14.8,21.446-2.8,7.368-12.614,9.655-19.567,10.47-10.765,1.261-21.922,1.042-32.739.823q-17.268-.351-34.461-2.25-4.461-.5-8.9-1.095c-1.872-.249-4.31-1.329-5.7.37-2.182,2.665-.174,6.13,1.865,8.2,3.02,3.072,7.5,4.937,11.248,6.96q6.284,3.374,12.75,6.409a285.218,285.218,0,0,0,222,7.375,270.712,270.712,0,0,0,24.806-11.18,1.319,1.319,0,0,0-.664-2.438c-44.553.913-83.868,25.1-127.025,32.958-9.338,1.7-22.8,3.367-28.882-5.888v1.321A320.454,320.454,0,0,1,1103.6,541.233c-.528-.679-1.057-1.366-1.578-2.046a775.891,775.891,0,0,1-103.842,72.567q-27.47,16.022-56.186,29.758c-19.325,9.232-39.171,17.627-59.893,23.175a191.078,191.078,0,0,1-32.06,5.881c-9.1.83-18.374,1.155-27.4-.491-15.672-2.854-31.849-12.018-30.913-30.067.551-10.6,4.529-21.469,8.417-31.252a230.776,230.776,0,0,1,14.139-28.844,416.715,416.715,0,0,1,33.147-49.324,434.712,434.712,0,0,1,84.125-82.23q5.945-4.4,12.033-8.6c-.642-.491-1.276-.981-1.917-1.472-7.428,20.45-21.4,37.4-35.4,53.7-6.869,8.009-13.814,15.958-20.254,24.322-6.5,8.447-13.384,17.649-17.234,27.667a21.3,21.3,0,0,0-.362,15.528c1.834,4.733,5.216,8.7,8.9,12.123,8,7.428,17.461,13.641,26.783,19.257a226.2,226.2,0,0,0,61.637,25.545c42.772,10.734,88.36,8.908,129.826-6.273a228.066,228.066,0,0,0,100.332-72.7,207.9,207.9,0,0,0,17.4-25.681c2.317-4.084,4.6-8.961,3.835-13.784a10.068,10.068,0,0,0-8.3-8.281c-4.7-.9-9.5.385-13.98,1.683q-9.285,2.684-18.419,5.858a371.954,371.954,0,0,0-35.238,14.29q-8.764,4.076-17.3,8.621c.544.71,1.095,1.419,1.638,2.129a130.378,130.378,0,0,0,18.88-27.365,1.376,1.376,0,0,0-1.532-1.993c-12.516,2.514-21.265-11.2-22.224-22.013-.642-7.262.649-14.486,1.819-21.62a107.854,107.854,0,0,0,1.766-20.246c-.687-26.5-12.561-51.144-14.237-77.5-1.049-16.509,2.295-32.845,6.719-48.668a1.342,1.342,0,0,0-.928-1.638c-13.709-2.982-27.719-1.495-41.33,1.283a344.366,344.366,0,0,0-39.065,10.523,365.836,365.836,0,0,0-71.5,32.521c-5.73,3.389-11.444,6.877-16.909,10.674-3.993,2.77-8.191,6.243-9.308,11.225-1.1,4.929,1.344,9.821,5.08,12.961,4.242,3.578,9.8,4.665,15.2,4.907,6.658.294,13.384-.151,20.042-.325,6.741-.174,13.49-.355,20.239-.483,13.188-.249,26.383-.317,39.564.234,29.546,1.238,59.3,5.775,86.276,18.427,1.344.634,2.823-.989,1.661-2.151l-42.327-42.191c-6.575-6.552-12.931-13.49-19.884-19.65-5.05-4.476-11.293-8.13-18.276-6.575-11.754,2.612-15.634,17.521-16.668,27.772-.883,8.764-.581,17.785-.325,26.58q.419,14.324,1.985,28.58a360.409,360.409,0,0,0,12.508,62.293c.838-.355,1.676-.71,2.514-1.057-15.853-27.712-39.617-49.573-57.477-75.859-16.132-23.741-27.765-52.646-19.016-81.377,4.212-13.845,12.961-26.255,25.93-33.087l-1.593-2.068c-49.717,39.164-99.441,78.433-146.35,120.971q-17.755,16.1-34.9,32.853c-9.761,9.557-20.737,19.174-27.123,31.471a43.247,43.247,0,0,0-3.472,8.794c-.627,2.37-1.147,5.141.46,7.247,1.449,1.9,3.9,2.3,6.152,2.2,3.888-.181,7.783-1.057,11.655-1.472,14.909-1.593,30.15-1.185,44.086,4.892,26.444,11.535,43.368,37.412,58.33,60.829a1.323,1.323,0,0,0,2.446-.664,567.22,567.22,0,0,0-3.752-79.082q-2.253-19.091-5.767-38-1.834-9.863-4.016-19.65A175.9,175.9,0,0,0,886.6,397.51c-1.261-3.8-3.1-7.806-6.349-10.312-3.578-2.763-8.017-2.65-11.98-.732-9.157,4.424-15.739,13.867-20.1,22.722-4.944,10.04-8.13,20.986-10.727,31.834A226.161,226.161,0,0,0,841.2,559.63c.332,1.2,2.106.725,1.759-.415Z"
transform="translate(-750.089 -262.833)"/>
</g>
</g>
</g>
</svg>

Not sure if this is really what you are looking for, see modification.
Note that since svg2, all geometry can be done via css, so I removed some transform attributes. Positionning in svg is always a bit tricky, it's all about the viewBox, top left is X,Y [0,0], but transform-origin is changing that, it can be confusing.
Here the transform-origin is saying:
«In the viewbox, now the origin point for X[0] is 260px from the left of the container element»
«In the viewbox, now the origin point for Y[0] is in the center of the container element»
#rotate {
animation: rotate-right 4s infinite linear;
transform-origin: 260px center
}
#keyframes rotate-right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#chaos-svg {
position: absolute;
}
<svg id="chaos-svg" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 933.574 507.132">
<g>
<g id="rotate">
<g>
<path
d="M842.956,559.215c-13.5-44.47-13.143-93.8,2.484-137.722,3.45-9.708,8.077-19.4,15.521-26.715,3.654-3.593,9.315-8.576,14.864-7.209,4.628,1.14,7.036,6.19,8.425,10.3a152.516,152.516,0,0,1,3.9,15.656q2.027,9.059,3.759,18.17,3.476,18.31,5.745,36.831a579.556,579.556,0,0,1,4.107,83.068c.815-.219,1.631-.438,2.446-.664-13-20.344-26.987-41.564-47.384-55.235a73.957,73.957,0,0,0-35.978-12.4,122.234,122.234,0,0,0-23.258.808c-3.223.377-6.484,1.1-9.723,1.253-1.8.083-3.993-.06-4.514-2.2-.415-1.683.423-3.91.928-5.5,4.265-13.528,15.483-23.681,25.259-33.374q16.328-16.181,33.3-31.7c22.835-20.948,46.388-41.1,70.3-60.8,26.957-22.209,54.382-43.844,81.815-65.456,1.215-.959-.332-2.733-1.593-2.068-23.318,12.274-33,41.005-29.7,66.022,4.2,31.917,25.062,58.073,45.037,81.981,12.252,14.675,24.677,29.32,34.189,45.98a1.381,1.381,0,0,0,2.514-1.057A357.32,357.32,0,0,1,1030.9,371.731c.091-6.907.272-13.754,2.174-20.442,1.525-5.382,4.129-11.3,9.066-14.373,6.454-4.008,13.6-.71,18.8,3.767,6.469,5.548,12.282,11.988,18.314,18l44.523,44.365c.551-.717,1.1-1.434,1.661-2.151-45.542-21.341-96.988-19.854-146.078-18.517-6.228.166-12.471.453-18.7.43-6.19-.015-12.931-.717-17.423-5.465-10.78-11.4,8.047-20.925,16.049-25.87a361.918,361.918,0,0,1,109.187-44.855c15.234-3.5,31.094-6.107,46.592-2.725-.31-.544-.619-1.095-.928-1.638-4.152,14.811-7.375,30.09-7,45.55.347,14.026,3.8,27.7,7.247,41.224,3.5,13.739,7.088,27.652,7.164,41.919.075,14.7-6.115,29.667-3.02,44.312,2.385,11.308,12.539,22.888,25.062,20.374-.513-.664-1.019-1.329-1.532-1.993a127.633,127.633,0,0,1-18.457,26.814,1.36,1.36,0,0,0,1.638,2.129,370.133,370.133,0,0,1,68.453-27.953c4.778-1.412,10.38-3.442,15.385-1.993,6.424,1.849,6.069,8.591,3.963,13.671-1.94,4.673-4.907,9.028-7.639,13.263q-4.054,6.284-8.538,12.274a225.011,225.011,0,0,1-95.055,73.164,218.37,218.37,0,0,1-123.877,11.55,225.482,225.482,0,0,1-60.776-21.25,216.494,216.494,0,0,1-27.214-16.849c-8.107-5.9-19.333-13.543-20.231-24.534-.5-6.054,2.453-11.671,5.367-16.759,2.506-4.378,5.262-8.606,8.175-12.72,5.971-8.409,12.622-16.306,19.333-24.134,12.954-15.113,26.482-30.165,35.729-47.943a112.161,112.161,0,0,0,5.843-13.309,1.316,1.316,0,0,0-1.917-1.472A436.809,436.809,0,0,0,818.12,568.417c-11.248,18.321-21.326,37.707-26.716,58.632-2.348,9.112-3.9,18.917.74,27.591,3.442,6.417,9.512,10.953,16.056,13.875,16.464,7.345,35.54,6.054,52.9,3.374,21.7-3.344,42.583-10.553,62.7-19.182,20.156-8.643,39.783-18.593,58.987-29.161a777.377,777.377,0,0,0,108.7-72.409q6.216-4.948,12.342-10.017c1.223-1.012-.34-2.619-1.578-2.046A323.02,323.02,0,0,0,965.429,657.486a1.3,1.3,0,0,0,0,1.321c4.809,7.307,13.829,8.847,22,8.394,10.7-.6,21.469-3.593,31.705-6.583,22.126-6.462,43.414-15.49,65.675-21.522a161.157,161.157,0,0,1,38.786-6.069c-.219-.815-.438-1.623-.664-2.438a273.81,273.81,0,0,1-106.719,29.169,284.469,284.469,0,0,1-109.345-14.094,268.26,268.26,0,0,1-29.237-11.806q-6.828-3.238-13.46-6.877c-2.295-1.253-14.177-6.824-10.161-10.6l-1.276.34a389.3,389.3,0,0,0,53.5,4.046,256.291,256.291,0,0,0,26.157-.793c5.594-.544,11.429-1.759,16.3-4.718,4.507-2.74,7.775-7.254,7.572-12.7-.249-6.605-5.239-11.874-10.312-15.528-11.187-8.047-25.123-11.723-38.779-11.98-14.343-.272-28.678,3.02-41.926,8.379-13.15,5.314-25.923,12.576-36.257,22.382-9.64,9.149-17.9,21.68-16.653,35.533,1.17,12.984,10.108,22.979,20.684,29.773,11.165,7.171,24.209,11.459,37.02,14.577a182.528,182.528,0,0,0,39.36,5.08A196.227,196.227,0,0,0,987.6,676.117a185.253,185.253,0,0,0,65.2-44.5c10.357-11.1,18.782-23.771,28.467-35.434,6.266-7.534,28.195-34.023,36.363-16.162,1.532,3.352,2.491,6.983,3.865,10.4q2.117,5.288,4.718,10.365a120.9,120.9,0,0,0,12.607,19.567c4.212,5.337,9.134,11.633,16.049,13.4,7.2,1.834,14.3-1.849,19.876-6.092,23.605-17.944,38.076-45.859,49.808-72.394,2.891-6.545,5.662-13.15,8.417-19.755-.672.272-1.351.551-2.023.823a124.9,124.9,0,0,1,34.249,30.943,1.453,1.453,0,0,0,1.91.5c4.809-2.257,5.563-7.9,5.088-12.659-.732-7.33-3-14.667-4.6-21.846-3.661-16.426-7.277-32.86-11.014-49.264-6.62-29.048-13.6-58.987-27.485-85.582-11.233-21.514-28.618-41.73-52.88-48.215-20.08-5.367-44.614-1.819-58.489,14.917-10.108,12.191-12.614,29.124-13.694,44.433a156.184,156.184,0,0,0,5.239,52.14c.491,1.782,2.929.981,2.688-.74-3.02-21.477-14.9-40.643-30.535-55.326-17.438-16.381-39.413-26.859-61.916-34.37-12.063-4.024-24.406-7.428-36.808-10.244-11.24-2.559-23.832-3.986-34.045,2.559a23.812,23.812,0,0,0-9.066,10.093c-.664,1.48-1.925,4.242-1.472,5.911.476,1.751,2.8,2.71,4.378,2.959,5.08.8,10.75-2.484,15.294-4.273q9.274-3.657,18.427-7.609a714.447,714.447,0,0,0,70.461-35.608c11.135-6.333,22.269-12.682,33.8-18.291,5.9-2.876,11.9-5.548,18.027-7.9,5.737-2.2,11.708-4.492,17.77-5.609,6.084-1.125,12.267.347,14.411,6.749,1.54,4.6,1.011,9.768.491,14.5a202.977,202.977,0,0,0-.551,40.907,156.81,156.81,0,0,0,2.748,19.114c.981,4.454,2.431,9.013,5.1,12.765a16.323,16.323,0,0,0,11.271,7.005c5.918.778,12.063-1.019,17.83-2.144q10.576-2.061,21.145-4.114c6.386-1.246,13.437-3.457,19.982-2.318,9.987,1.736,14.29,11.716,15.9,20.661,2.068,11.5.853,23.787-.151,35.329A295.891,295.891,0,0,1,1218,492.445q-2.231,9.67-5.1,19.167c.853-.113,1.706-.219,2.552-.332q-8.855-19.827-17.717-39.662c-4.9-10.961-9.3-22.632-16.97-32.022-15.06-18.442-40.228-17.936-60.006-28.18-8.983-4.65-17.461-11.686-20.057-21.884-2.869-11.293,2.785-22.405,10.417-30.445,7.919-8.341,19.619-16.17,31.335-17.272,12.841-1.208,21.7,9.21,27.478,19.385,12.033,21.2,11.5,47.007,5.126,69.888-3.5,12.584-8.651,24.632-14.32,36.378-.679,1.412-1.374,2.823-2.068,4.227-.823,1.668-1.366,2.536-3.193,3.133a14.516,14.516,0,0,1-8.7-.181c-5.692-1.729-10.644-5.677-14.72-9.9-16.668-17.249-28.021-39.126-37.609-60.889-4.952-11.233-9.466-22.654-14.086-34.03-3.873-9.527-7.655-19.461-14.5-27.319a29.745,29.745,0,0,0-27.47-10.168c-11.648,1.827-22,8.9-31.124,15.958-22.465,17.37-44.44,35.419-66.634,53.121q-8.085,6.454-16.177,12.9c.762.445,1.525.891,2.287,1.329q3.454-20.529,5.556-41.262c1.178-11.663,2.884-23.787,1.812-35.517-.74-8.123-2.937-17.317-9.632-22.654a17.874,17.874,0,0,0-4.431-2.6c-2.657-1.079-3.465-.408-5.956.921q-7.439,3.963-14.645,8.341a314.681,314.681,0,0,0-94.452,89.054,308.8,308.8,0,0,0-34.672,65.4,1.361,1.361,0,0,0,1.978,1.525c29.916-21.967,51.7-52.4,72.952-82.351-.815-.347-1.638-.687-2.453-1.034-17.3,54.714-34.936,111.6-32.188,169.669a215.438,215.438,0,0,0,7.511,47.573,1.336,1.336,0,0,0,2.612-.355,219.224,219.224,0,0,0-26.821-99.17c-2.891-5.269-9.074-14.411-16.162-9.965a1.325,1.325,0,0,0,.309,2.393,86.438,86.438,0,0,0,62.286-6.039l-1.336-2.287a877.78,877.78,0,0,1-87.575,48.864c.679.393,1.359.778,2.038,1.17-5.941-45.407,25.168-83.272,54.3-114.048a1022.383,1022.383,0,0,1,98.8-91.5c9.557-7.745,19.106-15.724,29.358-22.541,9.912-6.583,21.091-11.859,33.275-10.742-.325-.785-.649-1.563-.974-2.348q-9.534,8.923-19.061,17.853a1.385,1.385,0,0,0,.6,2.295,314.1,314.1,0,0,1,104.484,47.935q6.749,4.767,13.248,9.889c3.012,2.385,11.784,7.723,9.044,12.471h2.37a138.055,138.055,0,0,1-24.232-93.817c-.687.393-1.381.793-2.068,1.185,7.541,4.99,11.286,13.437,13.648,21.869,2.778,9.934,4.393,20.254,6.326,30.384q6.534,34.276,11.935,68.763,5.4,34.547,9.648,69.268c2.431,19.906,6.764,42.576-5.216,60.353-9.361,13.89-25.379,21.567-39.971,28.693-7.972,3.9-15.973,7.738-23.545,12.388a158.438,158.438,0,0,0-24.2,18.283c-13.278,12.191-27.727,29-25.349,48.388,1.963,16,15.724,27.591,30.445,32.083,19.083,5.828,39.345-.687,56.8-8.621,19.929-9.066,39.1-20,57.734-31.471q14.086-8.662,27.81-17.883c8.107-5.428,16.962-10.583,23.945-17.483,5.548-5.488,9.881-13.09,7.315-21.069-2.325-7.217-9.232-11.723-16.064-14.109-9.043-3.148-18.865-2.333-28.067-4.741-2.016-.528-5.835-1.2-6.719-3.178-1.057-2.37-1.442-5.375-1.94-7.9a103.726,103.726,0,0,1-1.842-16.66c-.755-21.7,3.88-43.013,6.3-64.46,2.121-18.812,2.657-38.575-3.367-56.768-5.782-17.476-17.891-31.079-33.5-40.537-16.607-10.063-35.434-15.234-54.012-20.291-10.289-2.8-20.593-5.624-30.588-9.368-9.338-3.5-18.872-7.685-26.474-14.29-6.937-6.032-12.478-14.63-10.432-24.187,1.887-8.81,9.028-16.011,16.66-20.322,13.324-7.526,30.482-7.511,44.2-1a42.717,42.717,0,0,1,16.872,14.048c.385-.672.77-1.336,1.155-2.008q-19.34-1.936-38.673-3.88c-12.584-1.261-25.191-2.484-37.85-2.612-22.858-.234-45.21,3.993-65.554,14.667a126.771,126.771,0,0,0-29.176,21.152c-1.064,1.027.362,3.012,1.623,2.1,20.722-15,42.5-29.124,66.355-38.612a156.2,156.2,0,0,1,35.487-9.753c12.342-1.766,25.613-2.106,37.8.891,13.007,3.193,27.108,13.731,24.556,28.844.43-.332.861-.657,1.3-.989-22.1.528-40.568-13.747-59.712-22.715a120.8,120.8,0,0,0-99.781-1c.445.762.891,1.517,1.329,2.28,21.733-16.177,46.365-29.131,73.1-34.521,24.617-4.967,50.781-2.838,73.609,8a92.98,92.98,0,0,1,31.818,24.436c.43-.747.868-1.487,1.3-2.234-45.784-14.124-97.388-7.723-138.243,17.378-9.595,5.9-19.152,12.826-25.289,22.465-6.635,10.425-7.632,22.858-5.631,34.815,2.189,13.044,7.451,25.3,12.3,37.518q7.734,19.453,14.086,39.428,7.168,22.533,12.554,45.58c1.827,7.821,6.182,26.2-5.881,28.346.415.113.838.219,1.253.332a503.385,503.385,0,0,1-62.233-81.807c-4.318-7.088-8.817-14.23-12.252-21.8-3.329-7.345-6.039-16.524-2.2-24.209,6.779-13.558,25.991-12.274,38.7-12.5q31.83-.566,63.667-1.125a1.22,1.22,0,0,0,0-2.438c-24.322.43-48.683.551-73,1.306-8.115.249-17,1-24.028,5.458-7.473,4.726-10.561,13.1-9.361,21.7,1.449,10.365,7.277,19.642,12.486,28.5q8.492,14.437,17.936,28.286a504.042,504.042,0,0,0,40.907,52.238q2.638,2.944,5.322,5.85c1.547,1.676,2.25,3.125,4.612,2.476a10.774,10.774,0,0,0,6.673-5.647c3.4-6.651,2.34-14.811.762-21.794a599.294,599.294,0,0,0-19.536-67.638c-3.873-10.946-8.266-21.68-12.44-32.513-4.024-10.44-7.79-21.31-8.56-32.558-.755-11.074,1.993-21.839,9.074-30.528,6.469-7.941,15.188-13.822,23.945-18.97a168.74,168.74,0,0,1,118.887-19.385c4.982,1.042,9.9,2.333,14.773,3.835,1.381.423,2.1-1.276,1.3-2.234-15.875-19.129-39.307-30.618-63.652-34.347-26.436-4.054-53.227,1.276-77.5,12.01a212.23,212.23,0,0,0-40.59,24.036,1.32,1.32,0,0,0,1.329,2.28,118.526,118.526,0,0,1,66.128-8.455,116.269,116.269,0,0,1,31.366,9.67c9.481,4.476,18.464,9.934,27.916,14.471,10.289,4.944,21.212,8.7,32.762,8.432a1.368,1.368,0,0,0,1.3-.989c1.985-11.738-5.428-22.579-15.483-28.021-11.5-6.22-25.726-6.847-38.514-6.175-26.587,1.4-51.876,11.384-74.885,24.27a405.3,405.3,0,0,0-39.254,25.53c.543.7,1.079,1.4,1.623,2.1a124.132,124.132,0,0,1,55.318-31c23.364-5.986,47.664-4.167,71.4-1.827q21.322,2.106,42.644,4.273a1.341,1.341,0,0,0,1.155-2.008c-17.091-24.473-58.179-27.7-77.006-3.45-5.239,6.749-7.7,15.339-4.854,23.628,2.733,7.972,9.157,14.131,15.989,18.759,8.168,5.526,17.612,9.255,26.889,12.463,10.1,3.488,20.442,6.19,30.739,9.021,18.593,5.118,37.412,10.863,53.408,21.99a72.126,72.126,0,0,1,19.7,19.944,74.542,74.542,0,0,1,10.191,26.459c7.9,41.383-11.2,82.426-4.529,123.839q.645,4.008,1.638,7.949c.543,2.144.679,4.786,2.748,5.888,4.212,2.25,9.081,3.193,13.754,3.842,9.1,1.261,18.547,1.208,26.715,5.956,7.919,4.6,11.769,13.18,6.968,21.6s-14.147,13.686-21.907,18.97c-18.215,12.4-36.816,24.27-56.005,35.117-9.564,5.413-19.272,10.584-29.146,15.407-9.738,4.763-19.755,9.134-30.339,11.64-18.14,4.3-38.439,1.8-51.514-12.667a31.234,31.234,0,0,1-8.183-23.907c.936-10.259,6.6-19.612,13.06-27.372,12.78-15.339,29.471-27.433,47.158-36.484,14.6-7.473,30.324-13.694,42.855-24.557a51.6,51.6,0,0,0,14.041-18.849c3.88-9.247,4.439-19.453,3.873-29.35-.634-11.036-2.257-22.043-3.638-33q-2.163-17.109-4.6-34.189-4.9-34.3-10.931-68.415-3.057-17.3-6.409-34.559c-1.849-9.512-3.3-19.325-6.59-28.474-2.635-7.33-6.688-14.041-13.294-18.412a1.391,1.391,0,0,0-2.068,1.185,140.345,140.345,0,0,0,24.6,95.206,1.391,1.391,0,0,0,2.37,0c2.083-3.616.015-7.315-2.589-10.04-3.231-3.374-7.315-6.145-11.021-8.983Q1053,369.5,1039.755,361.3a315.411,315.411,0,0,0-89.205-37.676c.2.762.408,1.532.6,2.295q9.534-8.923,19.061-17.853a1.393,1.393,0,0,0-.974-2.348c-21.454-1.963-39.526,14.169-55.19,26.565q-27.357,21.65-53.2,45.135-25.647,23.3-49.672,48.313c-15.445,16.079-30.9,32.566-42.644,51.627-12.81,20.782-20.971,45.331-17.732,69.94a1.377,1.377,0,0,0,2.038,1.17,880.124,880.124,0,0,0,87.544-48.917,1.325,1.325,0,0,0-1.336-2.287,83.627,83.627,0,0,1-60.248,5.805c.106.8.211,1.593.31,2.393,6.749-4.227,12.516,8.817,14.766,13.128a213,213,0,0,1,9.791,21.665,218.278,218.278,0,0,1,12.056,45.2,215.5,215.5,0,0,1,2.4,26.9c.868-.121,1.736-.234,2.612-.355-15.536-55.854-4.877-114.32,10.493-168.959,4.424-15.717,9.285-31.305,14.215-46.871.483-1.532-1.615-2.212-2.453-1.034-20.963,29.539-42.478,59.7-71.994,81.377.657.506,1.321,1.012,1.978,1.525a311.248,311.248,0,0,1,116.4-145.482,301.478,301.478,0,0,1,26.859-16.064c1.313-.695,1.5-.944,2.861-.385a15.537,15.537,0,0,1,2.6,1.374,16.731,16.731,0,0,1,4.635,4.665,30.883,30.883,0,0,1,4.356,11.4c2.333,11.822.483,24.4-.627,36.257q-2.117,22.647-5.911,45.1a1.38,1.38,0,0,0,2.287,1.329Q961.2,388.474,995.98,360.74c17.325-13.814,45.89-39.692,66.966-17.423,7.926,8.379,11.852,19.944,16.094,30.43,4.643,11.467,9.232,22.964,14.3,34.249a274.137,274.137,0,0,0,17.264,33.079c6.281,10.063,13.52,20.473,22.45,28.384,4.129,3.661,9.028,6.968,14.486,8.2,3.759.845,10.606,1,12.728-2.929a222.282,222.282,0,0,0,15.611-36.68c7.428-22.9,9.647-48.358.075-71-4.182-9.881-11.112-21.182-21.159-25.968-10.969-5.231-23.515-.2-33.072,5.8-9.217,5.782-17.649,13.958-21.929,24.111-4.069,9.655-3.276,20.54,2.891,29.131,13.6,18.94,38.96,19.536,58.534,28.323a48.025,48.025,0,0,1,14.766,9.889,62.772,62.772,0,0,1,10.825,15.951c6.349,12.546,11.678,25.681,17.408,38.514q4.427,9.919,8.855,19.831c.513,1.155,2.235.725,2.552-.332a301.07,301.07,0,0,0,12.614-77.482c.483-16.094-1.4-42.44-23.228-42.213-6.213.068-12.463,1.8-18.533,2.974l-20.14,3.918c-6.084,1.185-13.256,3.525-19.318,1.2-4.8-1.842-7.624-6.447-9.285-11.089-1.978-5.518-2.778-11.467-3.533-17.257a191.988,191.988,0,0,1-1.54-20.072,194.547,194.547,0,0,1,.543-20.125c.43-5.45,1.442-10.931,1.223-16.411-.166-4.152-1.057-8.538-3.956-11.7-3.427-3.737-8.5-4.461-13.309-3.812-5.729.778-11.376,2.906-16.781,4.892-5.654,2.076-11.21,4.424-16.668,6.96-22.865,10.614-44.146,24.3-66.475,35.948q-17.359,9.047-35.246,17.023-9.217,4.11-18.57,7.919-4.3,1.755-8.636,3.442a57.252,57.252,0,0,1-8.6,3.1,7.585,7.585,0,0,1-3.918.091c-1.5-.513-1.344-1.17-.959-2.559a17.9,17.9,0,0,1,4-7.1,25.554,25.554,0,0,1,13.294-7.572c12.758-2.929,26.648,1.917,38.907,5.2,23.749,6.364,47.46,14.554,67.857,28.61,17.763,12.244,33,29.509,40.2,50.079a79.9,79.9,0,0,1,3.714,15.385c.9-.249,1.789-.491,2.688-.74a153.639,153.639,0,0,1-5.458-44.637c.37-14.267,1.932-30.165,8.938-42.885,10.478-19.016,33.743-25.349,54.058-21.854,23.869,4.107,41.775,21.612,53.657,41.851,13.928,23.726,21.137,51.038,27.531,77.572,4.039,16.774,7.677,33.645,11.429,50.487q2.9,13.01,5.805,26.021c1.147,5.163,4.159,14.849-2.212,17.838l1.91.5a128.128,128.128,0,0,0-35.268-31.917,1.4,1.4,0,0,0-2.023.823c-7.466,17.944-15.06,35.94-25.04,52.661a158.741,158.741,0,0,1-16.759,23.379c-6.273,7.156-13.709,15.2-22.556,19.091-5.126,2.257-10.508,2.2-15.219-1-4.084-2.77-7.3-6.945-10.312-10.795a117.819,117.819,0,0,1-15.49-26.27c-1.842-4.318-3.05-8.915-5.02-13.173-1.623-3.518-4.3-6.515-8.259-7.247-8.734-1.623-17.023,6.764-22.631,12.29-13.981,13.754-24.089,30.807-37.344,45.2a177.633,177.633,0,0,1-40.228,32.415,193.765,193.765,0,0,1-98.694,26.851,178.847,178.847,0,0,1-51.1-7.5c-15.853-4.786-34.144-12.086-42.817-27.206-10.093-17.6.876-36.174,14.433-48.041,14.147-12.388,32.422-20.986,50.676-25.206,17.989-4.159,37.609-3.744,54.193,5.088,7.315,3.9,18.533,11.618,14.8,21.446-2.8,7.368-12.614,9.655-19.567,10.47-10.765,1.261-21.922,1.042-32.739.823q-17.268-.351-34.461-2.25-4.461-.5-8.9-1.095c-1.872-.249-4.31-1.329-5.7.37-2.182,2.665-.174,6.13,1.865,8.2,3.02,3.072,7.5,4.937,11.248,6.96q6.284,3.374,12.75,6.409a285.218,285.218,0,0,0,222,7.375,270.712,270.712,0,0,0,24.806-11.18,1.319,1.319,0,0,0-.664-2.438c-44.553.913-83.868,25.1-127.025,32.958-9.338,1.7-22.8,3.367-28.882-5.888v1.321A320.454,320.454,0,0,1,1103.6,541.233c-.528-.679-1.057-1.366-1.578-2.046a775.891,775.891,0,0,1-103.842,72.567q-27.47,16.022-56.186,29.758c-19.325,9.232-39.171,17.627-59.893,23.175a191.078,191.078,0,0,1-32.06,5.881c-9.1.83-18.374,1.155-27.4-.491-15.672-2.854-31.849-12.018-30.913-30.067.551-10.6,4.529-21.469,8.417-31.252a230.776,230.776,0,0,1,14.139-28.844,416.715,416.715,0,0,1,33.147-49.324,434.712,434.712,0,0,1,84.125-82.23q5.945-4.4,12.033-8.6c-.642-.491-1.276-.981-1.917-1.472-7.428,20.45-21.4,37.4-35.4,53.7-6.869,8.009-13.814,15.958-20.254,24.322-6.5,8.447-13.384,17.649-17.234,27.667a21.3,21.3,0,0,0-.362,15.528c1.834,4.733,5.216,8.7,8.9,12.123,8,7.428,17.461,13.641,26.783,19.257a226.2,226.2,0,0,0,61.637,25.545c42.772,10.734,88.36,8.908,129.826-6.273a228.066,228.066,0,0,0,100.332-72.7,207.9,207.9,0,0,0,17.4-25.681c2.317-4.084,4.6-8.961,3.835-13.784a10.068,10.068,0,0,0-8.3-8.281c-4.7-.9-9.5.385-13.98,1.683q-9.285,2.684-18.419,5.858a371.954,371.954,0,0,0-35.238,14.29q-8.764,4.076-17.3,8.621c.544.71,1.095,1.419,1.638,2.129a130.378,130.378,0,0,0,18.88-27.365,1.376,1.376,0,0,0-1.532-1.993c-12.516,2.514-21.265-11.2-22.224-22.013-.642-7.262.649-14.486,1.819-21.62a107.854,107.854,0,0,0,1.766-20.246c-.687-26.5-12.561-51.144-14.237-77.5-1.049-16.509,2.295-32.845,6.719-48.668a1.342,1.342,0,0,0-.928-1.638c-13.709-2.982-27.719-1.495-41.33,1.283a344.366,344.366,0,0,0-39.065,10.523,365.836,365.836,0,0,0-71.5,32.521c-5.73,3.389-11.444,6.877-16.909,10.674-3.993,2.77-8.191,6.243-9.308,11.225-1.1,4.929,1.344,9.821,5.08,12.961,4.242,3.578,9.8,4.665,15.2,4.907,6.658.294,13.384-.151,20.042-.325,6.741-.174,13.49-.355,20.239-.483,13.188-.249,26.383-.317,39.564.234,29.546,1.238,59.3,5.775,86.276,18.427,1.344.634,2.823-.989,1.661-2.151l-42.327-42.191c-6.575-6.552-12.931-13.49-19.884-19.65-5.05-4.476-11.293-8.13-18.276-6.575-11.754,2.612-15.634,17.521-16.668,27.772-.883,8.764-.581,17.785-.325,26.58q.419,14.324,1.985,28.58a360.409,360.409,0,0,0,12.508,62.293c.838-.355,1.676-.71,2.514-1.057-15.853-27.712-39.617-49.573-57.477-75.859-16.132-23.741-27.765-52.646-19.016-81.377,4.212-13.845,12.961-26.255,25.93-33.087l-1.593-2.068c-49.717,39.164-99.441,78.433-146.35,120.971q-17.755,16.1-34.9,32.853c-9.761,9.557-20.737,19.174-27.123,31.471a43.247,43.247,0,0,0-3.472,8.794c-.627,2.37-1.147,5.141.46,7.247,1.449,1.9,3.9,2.3,6.152,2.2,3.888-.181,7.783-1.057,11.655-1.472,14.909-1.593,30.15-1.185,44.086,4.892,26.444,11.535,43.368,37.412,58.33,60.829a1.323,1.323,0,0,0,2.446-.664,567.22,567.22,0,0,0-3.752-79.082q-2.253-19.091-5.767-38-1.834-9.863-4.016-19.65A175.9,175.9,0,0,0,886.6,397.51c-1.261-3.8-3.1-7.806-6.349-10.312-3.578-2.763-8.017-2.65-11.98-.732-9.157,4.424-15.739,13.867-20.1,22.722-4.944,10.04-8.13,20.986-10.727,31.834A226.161,226.161,0,0,0,841.2,559.63c.332,1.2,2.106.725,1.759-.415Z"
transform="translate(-750.089 -262.833)"/>
</g>
</g>
</g>
</svg>

CSS animation do not work for svg in <img>

I am trying to animate an SVG in image/object tag but it is not working
svg {
width: 100%;
height: 200px;
}
.rotate-45 {
transform-origin: center;
transform: rotate(45deg);
}
.rotate {
transform-origin: center;
animation: rotate 1s ease-in-out infinite;
}
.rotate-back {
transform-origin: center;
animation: rotate 1s ease-in-out infinite;
animation-direction: alternate;
}
.left {
animation: move 1s ease-in-out infinite;
}
.right {
animation: move 1s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(calc(90deg + 45deg));
}
}
#keyframes move {
50% {
transform: translate(-30px, -30px);
}
}
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(500,500)">
<rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none" />
<rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none" />
<g transform="translate(-50,0) rotate(-45)">
<polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" />
</g>
<g transform="translate(50,0) rotate(135)">
<polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" />
</g>
<text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text>
</g>
</svg>
How to animate the SVG inside the image tag along side with CSS
Here is a plunker for that code https://plnkr.co/edit/TdfR7cpVaQArtcUs0Hro?p=preview

You can't animate the internals of an <img> from the outside. Even if it is an SVG. There are two reasons for this:
CSS doesn't apply across document boundaries, and
Images referenced via an <img> must be self contained.
Animations should work if you put the CSS inside the external SVG (in a <style> element as normal).
Note also that you will need to change the way you do transform-origin. The way it works in Chrome is convenient, but it is wrong according to the current spec. It won't work on other browsers like Firefox.
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.rotate-45 {
transform-origin: 0px 0px;
transform: rotate(45deg);
}
.rotate {
transform-origin: 0px 0px;
animation: rotate 1s ease-in-out infinite;
}
.rotate-back {
transform-origin: 0px 0px;
animation: rotate 1s ease-in-out infinite;
animation-direction: alternate;
}
.left {
animation: move 1s ease-in-out infinite;
}
.right {
animation: move 1s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(135deg);
}
}
#keyframes move {
50% {
transform: translate(-30px, -30px);
}
}
</style>
<g transform="translate(500,500)">
<rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none"/>
<rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none"/>
<g transform="translate(-50,0) rotate(-45)"><polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g>
<g transform="translate(50,0) rotate(135)"><polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g>
<text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text>
</g>
</svg>

You can use <?xml-stylesheet href="style.css" type="text/css"?> if you dont want to have to embed it for img tags to work. The above code will work in an object tag
If you want img tags to work do what Kaiido suggested and embed it.

If you're working with pure JavaScript or some other environment that doesn't automatically include SVG's inline in your HTML output (eg like create-react-app does), here's a solution that might come in handy for you:
<img id="logo" src="logo.svg" />
<script>
// load logo inline for animation on hover
const loadLogo = async () => {
// get logo, parse source text, and insert text into doc
document.write(await (await fetch("logo.svg")).text());
// remove fallback img logo
document.querySelector("img#logo").remove();
};
loadLogo();
</script>
All this does is attempt to load an image at a given url/path, then insert its text contents right into the document, in place. Then you can style it from other style sheets, manipulate sub-elements with javascript, have user interaction animations, and etc. If it fails to load for any reason, there is an <img> there as a backup.
This could be written to be more general too, but this was just a quick solution I used once.
Another solution is to just embed the SVG using <object> as explained here, though that could have some limitations depending on what you want to do.

Animating a SVG with CSS transform and transition

I need help in this SVG animation I'm doing.
It features a doughnut chart animating. The maroon-colored part is supposed to rotate and fill up the space, similar to a infographic.
The problem is, the maroon-colored part is only half of the chart and it is hidden under the main chart, which then rotate to 'fill up' the chart but it cannot go any further than 50% of the chart because it then gets hidden again.
You'll understand more when playing with the rotation of the svg.
Any advice/solution to how I can alter my codes/SVG in Illustrator? (I have zero knowledge on XML so I wouldn't know what the XML codes mean.)
<figure>
<path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8
c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/>
<path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0
C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
<path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
</svg>
Tryout: http://codepen.io/anon/pen/QdMrBY

Something like this?
#ring
{
width: 20%;
}
#right
{
}
#left-top
{
}
#left-bottom
{
fill: maroon;
transform: rotate(180deg);
transform-origin: 100% 50%;
transition: 1s;
}
#ring {
animation: spin infinite 10s linear;
}
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<figure>
<svg version="1.1" id="ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 390.5 383" style="enable-background:new 0 0 390.5 383;" xml:space="preserve">
<path id="right" class="st0" d="M196.8,0l-0.4,55.7c74.6,0.5,134.9,61.1,134.9,135.8c0,75-60.8,135.8-135.8,135.8
c-0.3,0-0.6,0-0.9,0l-0.4,55.7c0.4,0,0.8,0,1.2,0C301.3,383,387,297.3,387,191.5C387,86.2,302,0.7,196.8,0z"/>
<path id="left-bottom" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0
C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
<path id="left-top" class="st0" d="M59.7,191.5c0-75,60.8-135.8,135.8-135.8c0.3,0,0.6,0,0.9,0L196.8,0c-0.4,0-0.9,0-1.3,0 C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.5z"/>
</svg>
</figure>