Can't rotate svg element centered - html
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>
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 to prevent an outline on SVG path when animating clip path?
I'm trying to get this animation to work in my website. For some reason the layered paths show through so a thin white outline for the path (that's animated in) is visible ruining the animation, despite the fact the paths are identical in size. I wondered if anyone has any suggestions on how to prevent this? I've made a jsFiddle and added the code below. If you change the background for the body to black it's even clearer. Any help would be appreciate. body { background: #333; padding: 2em; } svg { display: block; left: 50%; max-width: 8em; position: absolute; top: 50%; transform: translate(-50%,-50%); } #rect { animation: slideOver 5s linear infinite; } #keyframes slideOver { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }v <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346"> <defs> <clipPath id="clip-path"> <rect id="rect" x="0" y="0" height="346" width="250"/> </clipPath> </defs> <path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/> <path clip-path="url(#clip-path)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/> </svg>
SVG animation acts funny in firefox
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.
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>
Rotating svg element looks like bouncing slightly
I looked at the existing question related yo my query but could not get help. I am Using basic animation of css3. Below is the fiddle.. https://jsfiddle.net/gamerVinod/d21c6bcb/5/ Below is the css #keyframes rotate { from { transform: rotate(0deg); transform-origin: center; } to { transform: rotate(359deg); transform-origin: center; } } .rotate-element { animation: rotate 1s infinite linear; } Whenever i use SVG and rotate it then it bounces slightly. I am not able to find out whether it is due to SVG path or anything else.Can someone please let me know the reason of it and how to fix it?
As #Ouroborus said, bezier curves can only approximate circular arcs. If you need to rotate those shapes then, unless your shape is carefully and accurately crafted, you are likely to see some shimmy. You could use the arc (A) path element instead. But you don't need to. By far the simplest solution here is to use an actual <circle>. #keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .rotate-element { animation: rotate 1s infinite linear; } .parent{ height: 200px; width: 200px; background: red; display: flex; align-items:center; text-align: center; } .child{ height: 200px; width: 200px; } <div class="parent"> <svg class="child rotate-element" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> <circle cx="20" cy="20" r="13.25" opacity="0.2" fill="none" stroke="#000" stroke-width="3"/> <circle cx="20" cy="20" r="13.25" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="6 80"/> </svg> </div> Here I am using two circles with thick strokes (lines) and transparent fill. The one at the back is semi-transparent (like the original SVG). The one on top has only part of it's stroke drawn by using a dash array.