Home > Mobile >  How can I make my svg's grinder rotate using CSS animations while staying in place?
How can I make my svg's grinder rotate using CSS animations while staying in place?

Time:05-15

fellow Devs,

I'm currently having trouble making my grinders (or whatever they're called) rotate properly in my svg. Basically I want them to rotate 360deg in place instead of going across the screen like so:

[codepen] (https://codepen.io/UserBrayann/pen/KKQNboQ)

Any solutions will be awesome and appreciated.

CSS

    @keyframes cloud-color {
  100% {
    fill: #000;
  }
}

@keyframes cloud-move {
  from {
    transform: translate(0, 20px);
  }
  to {
    transform: translate(100px, 20px);
  }
}

@keyframes rotating-grind {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.grind {
  animation: 2s rotating-grind infinite linear;
  transform-origin: top bottom;
}

.cloud {
  animation: 2s cloud-move infinite alternate linear;
}

CodePudding user response:

@keyframes rotating-grind {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.grind {
  animation: rotating-grind 5s infinite linear;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="419.000000pt" height="443.000000pt" viewBox="0 0 419.000000 443.000000" preserveAspectRatio="xMidYMid meet" >
          <metadata>
            Created by potrace 1.16, written by Peter Selinger 2001-2019
          </metadata>
          <g
            transform="translate(0.000000,443.000000) scale(0.100000,-0.100000)"
            fill="#000000"
            stroke="none"
          >
            <path
              
              d="M742 4138 c-17 -17 -17 -249 0 -266 8 -8 50 -12 124 -12 l111 0 13
-46 c14 -49 24 -48 37 6 l9 35 120 5 119 5 0 140 0 140 -260 3 c-194 2 -264
-1 -273 -10z m528 -133 l0 -125 -121 0 -120 0 -11 -32 -12 -33 -8 33 -9 32
-119 0 -120 0 0 125 0 125 260 0 260 0 0 -125z"
            />
            <path
              d="M810 4075 c0 -13 25 -15 198 -13 123 2 197 7 197 13 0 6 -74 11 -197
13 -173 2 -198 0 -198 -13z"
            />
            <path
              d="M813 4028 c3 -10 51 -13 197 -13 146 0 194 3 198 13 3 9 -41 12 -198
12 -157 0 -201 -3 -197 -12z"
            />
            <path
              d="M817 3994 c-20 -20 10 -24 194 -24 156 0 200 3 197 13 -4 9 -53 13
-194 15 -105 1 -193 -1 -197 -4z"
            />
            <path
              d="M810 3935 c0 -13 20 -15 150 -13 92 2 150 7 150 13 0 6 -58 11 -150
13 -130 2 -150 0 -150 -13z"
            />
            <path
              d="M1856 4078 c-3 -13 -6 -39 -6 -58 0 -31 -4 -37 -32 -48 -29 -11 -35
-9 -66 16 -19 15 -40 31 -48 37 -10 7 -28 -4 -69 -45 -30 -30 -55 -58 -55 -63
0 -5 16 -28 35 -51 32 -40 34 -45 23 -74 -10 -25 -18 -32 -39 -32 -15 0 -41
-3 -58 -6 -30 -6 -31 -7 -31 -65 l0 -59 -703 0 c-815 0 -740 11 -735 -106 l3
-69 765 -5 765 -5 -710 -5 -710 -5 -3 -767 -2 -768 -45 0 -45 0 0 -80 0 -80
45 0 45 0 0 -80 0 -80 165 0 165 0 0 -110 0 -110 275 0 275 0 0 110 0 110 885
0 885 0 0 63 c0 95 17 50 25 -67 3 -56 8 -113 11 -129 l6 -27 -335 0 c-258 0
-337 -3 -345 -13 -8 -9 3 -67 40 -206 l50 -195 -40 -33 c-77 -64 -90 -155 -38
-268 28 -62 58 -87 189 -154 83 -43 100 -58 65 -52 -4 0 -50 4 -103 7 -112 7
-140 -4 -151 -61 l-6 -35 -1102 -2 -1101 -3 1099 -2 1098 -3 32 -28 c37 -33
54 -39 201 -81 142 -40 162 -40 230 5 49 33 57 35 86 25 22 -7 37 -8 51 0 21
11 122 15 175 6 18 -3 55 -23 82 -46 59 -49 73 -50 251 -17 168 31 222 62 205
116 -6 19 2 20 342 23 l348 2 -349 3 -348 2 48 33 c27 17 57 48 66 67 26 50
23 127 -6 183 -21 42 -23 57 -18 137 5 87 5 89 33 99 40 14 48 42 65 226 9 88
19 167 24 175 4 9 8 58 9 109 1 52 4 97 6 101 2 4 0 45 -5 92 -9 91 -31 148
-72 184 -21 19 -121 62 -220 94 l-38 12 0 57 0 58 39 12 c22 6 53 26 69 45 29
34 72 130 72 164 0 15 2 15 10 2 7 -11 10 -5 10 23 0 40 -28 104 -54 126 -9 8
-16 19 -16 26 0 43 -100 113 -174 122 -118 14 -176 -1 -218 -57 -22 -30 -38
-107 -20 -96 15 9 5 -47 -14 -86 -8 -15 -14 -33 -14 -41 0 -8 -11 -19 -25 -25
-28 -13 -32 -34 -10 -52 12 -10 14 -28 10 -86 -5 -73 -5 -75 20 -84 15 -6 37
-10 50 -10 14 0 29 -9 35 -20 19 -36 -38 -24 -119 25 -41 25 -95 52 -120 61
-25 9 -56 20 -68 25 l-23 9 0 294 0 295 123 3 122 3 3 178 2 177 -125 0 -125
0 -2 183 -3 182 -270 5 -270 5 198 3 c188 2 197 3 197 22 0 10 9 24 20 30 33
18 26 61 -16 98 l-36 32 -134 0 -134 0 0 59 c0 58 -1 59 -31 65 -17 3 -44 6
-59 6 -22 0 -30 6 -39 31 -6 18 -11 34 -11 35 0 2 16 22 36 44 41 45 41 47
-38 119 l-47 43 -44 -36 c-41 -33 -46 -35 -75 -24 -29 11 -32 17 -38 70 l-7
58 -82 0 c-77 0 -83 -1 -89 -22z m164 -43 l0 -56 43 -18 42 -18 43 35 43 35
52 -51 51 -51 -25 -28 c-51 -56 -51 -58 -33 -96 18 -38 36 -47 97 -47 l37 0 0
-55 0 -55 -119 0 -119 0 -4 55 c-8 97 -90 170 -189 168 -98 -1 -179 -81 -182
-179 l-2 -44 -117 0 -118 0 0 55 0 55 38 0 c60 0 76 9 93 49 16 37 16 37 -17
77 -19 21 -34 43 -34 49 0 13 82 95 95 95 5 -1 27 -16 49 -34 38 -33 39 -33
76 -19 39 16 50 38 50 104 l0 29 75 0 75 0 0 -55z m25 -230 c42 -31 74 -94 75
-142 l0 -33 -175 0 -175 0 0 34 c0 68 43 133 105 162 48 23 127 13 170 -21z
m615 -204 c0 -5 -7 -14 -15 -21 -21 -18 -19 -57 5 -77 11 -10 20 -21 20 -25 0
-5 -580 -8 -1290 -8 l-1290 0 0 63 c0 35 3 67 7 70 10 10 2563 8 2563 -2z m45
-55 c0 -29 -31 -44 -50 -25 -23 23 -9 51 24 47 18 -2 26 -9 26 -22z m-592
-103 c-89 -2 -237 -2 -330 0 -92 1 -19 3 162 3 182 0 257 -2 168 -3z m-72 -35
c0 -10 2 -10 6 0 4 9 90 12 384 12 l379 0 0 -175 0 -175 -140 0 -140 0 0 -130
0 -130 -185 0 -185 0 0 -115 c0 -88 -3 -113 -12 -109 -20 8 -103 127 -100 144
1 10 0 11 -4 2 -4 -9 -15 -7 -41 9 -31 19 -40 21 -66 11 -24 -9 -33 -9 -39 1
-6 9 -8 9 -8 -1 0 -17 -24 -42 -42 -43 -9 0 -9 -2 2 -6 30 -12 37 -26 26 -55
-9 -24 -7 -31 19 -58 17 -17 55 -45 85 -63 30 -17 58 -35 62 -41 5 -7 8 -6 8
3 0 27 41 -21 103 -123 69 -112 151 -206 211 -241 23 -14 52 -38 65 -56 13
-17 35 -36 50 -42 33 -14 151 -117 151 -132 0 -6 41 -48 90 -95 l90 -85 0 -62
0 -63 -875 0 -875 0 0 60 0 60 -275 0 -275 0 0 -60 0 -60 -155 0 -155 0 0 73
c0 65 3 76 25 97 21 20 25 33 25 82 0 55 -1 58 -25 58 l-25 0 0 760 0 760 920
0 c729 0 920 -3 921 -12z m1019 -373 c0 -13 -35 -15 -255 -15 -220 0 -255 2
-255 15 0 13 35 15 255 15 220 0 255 -2 255 -15z m-362 -72 c-21 -2 -55 -2
-75 0 -21 2 -4 4 37 4 41 0 58 -2 38 -4z m145 -40 c-34 -2 -93 -2 -130 0 -37
2 -9 3 62 3 72 0 102 -1 68 -3z m-155 -30 c-10 -2 -28 -2 -40 0 -13 2 -5 4 17
4 22 1 32 -1 23 -4z m95 -50 c-24 -2 -62 -2 -85 0 -24 2 -5 4 42 4 47 0 66 -2
43 -4z m-85 -40 c-21 -2 -55 -2 -75 0 -21 2 -4 4 37 4 41 0 58 -2 38 -4z
m-168 -41 c0 -21 -17 -44 -70 -97 l-70 -70 -98 98 -97 97 168 0 167 0 0 -28z
m-160 -177 c0 -6 -20 -30 -44 -54 l-45 -44 -48 35 -48 34 -3 115 -3 114 96
-95 c52 -52 95 -99 95 -105z m-362 136 c22 -16 43 -35 48 -42 4 -7 -3 -5 -17
4 -13 9 -31 17 -41 17 -9 0 -23 9 -31 21 -14 20 -16 20 -25 2 -6 -10 -14 -14
-19 -10 -7 8 22 37 37 37 4 0 25 -13 48 -29z m582 -168 l0 -158 -95 95 -95 95
62 62 c51 52 68 63 95 63 l33 0 0 -157z m220 -127 l0 -284 -37 19 c-21 10 -43
19 -50 19 -6 0 -18 9 -27 21 -10 15 -20 19 -35 14 -30 -9 -88 25 -151 89 l-54
56 77 0 77 0 0 175 0 175 100 0 100 0 0 -284z m-728 200 c32 -30 131 -109 220
-175 90 -65 183 -140 208 -166 25 -26 66 -58 93 -71 l47 -25 -6 -62 c-3 -34
-9 -93 -12 -132 l-7 -69 -60 57 c-33 31 -68 57 -77 57 -9 0 -30 16 -45 35 -15
20 -49 49 -75 66 -67 43 -126 111 -196 225 -69 112 -91 136 -142 153 -19 6
-46 21 -59 32 -22 18 -23 21 -7 38 16 18 18 17 50 -15 21 -21 43 -34 58 -33
23 1 23 1 -3 12 -40 18 -59 37 -74 74 -8 20 -21 33 -32 33 -10 0 -25 5 -33 10
-11 7 1 10 40 10 53 0 57 -2 112 -54z m-138 -8 c17 -14 18 -18 5 -18 -9 0 -22
7 -29 15 -7 8 -19 15 -27 15 -11 0 -11 4 -2 22 11 20 12 21 22 2 5 -10 19 -27
31 -36z m26 17 c16 -19 0 -19 -26 0 -16 12 -16 14 -3 15 9 0 22 -7 29 -15z
m-50 -40 c13 -14 21 -25 18 -25 -2 0 -15 11 -28 25 -13 14 -21 25 -18 25 2 0
15 -11 28 -25z m570 -120 l95 -95 -78 0 c-77 0 -80 1 -143 46 -35 25 -64 49
-64 52 0 8 82 92 90 92 3 0 48 -43 100 -95z m740 -145 c11 -6 24 -9 29 -6 8 5
20 -24 21 -48 0 -10 -83 1 -115 16 -19 8 -45 45 -45 63 0 11 25 4 43 -12 16
-14 19 -15 15 -3 -2 8 -14 20 -25 25 -16 8 -18 14 -10 32 9 22 11 21 38 -17
16 -21 38 -44 49 -50z m53 -80 c4 0 7 -6 6 -12 -3 -27 1 -48 11 -48 6 0 10 6
10 13 0 18 38 57 55 57 23 0 54 -36 48 -57 -2 -10 -22 -38 -44 -63 -32 -37
-41 -42 -49 -30 -8 13 -10 12 -10 -3 0 -10 11 -22 25 -27 27 -10 31 -23 40
-123 6 -76 5 -77 -81 -91 -74 -13 -166 28 -123 54 7 5 13 25 13 44 0 20 3 36
7 36 12 0 69 51 69 61 0 5 -10 3 -22 -5 -23 -14 -70 -20 -136 -17 -33 1 -33 1
-30 49 l3 47 38 -3 c21 -2 37 1 37 7 0 6 -6 8 -13 5 -24 -9 -67 14 -60 31 3
10 -3 22 -16 32 l-22 15 21 15 c11 8 28 12 36 9 8 -3 19 3 26 13 10 17 16 17
82 5 39 -8 75 -14 79 -14z m-363 -299 c-11 -29 -27 -91 -35 -138 -16 -91 -30
-129 -20 -53 15 108 59 260 71 247 3 -2 -4 -28 -16 -56z m212 -88 c32 -34 113
-49 188 -34 34 7 64 10 67 8 2 -3 -21 -11 -53 -17 -72 -15 -153 -5 -196 23
-27 19 -33 29 -34 62 -1 29 -1 32 3 10 2 -16 14 -40 25 -52z m-362 39 c0 -9
14 -44 30 -77 16 -33 27 -61 26 -63 -7 -6 -39 53 -57 106 -22 64 -22 65 -9 57
6 -3 10 -14 10 -23z m-2530 -61 c0 -33 -4 -40 -22 -43 -15 -2 -24 -11 -26 -25
-3 -19 -10 -23 -43 -23 l-39 0 0 65 0 65 65 0 65 0 0 -39z m3215 -124 c-25
-38 -35 -119 -24 -184 17 -93 25 -193 17 -193 -9 0 -11 13 -9 46 1 11 -11 35
-27 52 -30 32 -58 110 -49 134 3 7 6 2 6 -12 2 -33 33 -101 56 -120 17 -14 18
-13 12 3 -17 46 -26 147 -18 194 11 57 30 103 43 103 5 0 2 -10 -7 -23z
m-2415 -37 c0 -19 -7 -20 -255 -20 -248 0 -255 1 -255 20 0 19 7 20 255 20
248 0 255 -1 255 -20z m-362 -67 c-21 -2 -55 -2 -75 0 -21 2 -4 4 37 4 41 0
58 -2 38 -4z m145 -40 c-35 -2 -91 -2 -125 0 -35 2 -7 3 62 3 69 0 97 -1 63
-3z m-155 -40 c-10 -2 -28 -2 -40 0 -13 2 -5 4 17 4 22 1 32 -1 23 -4z m2366
-59 c56 -135 145 -253 227 -303 19 -12 30 -21 24 -21 -34 0 -123 79 -175 155
-35 50 -110 205 -110 226 0 19 6 9 34 -57z m-2261 19 c-23 -2 -64 -2 -90 0
-26 2 -7 3 42 3 50 0 71 -1 48 -3z m-95 -40 c-21 -2 -55 -2 -75 0 -21 2 -4 4
37 4 41 0 58 -2 38 -4z m1563 -62 c7 11 11 11 17 2 6 -10 90 -13 342 -15 l333
-3 61 -238 c43 -169 64 -236 73 -232 7 2 13 -2 13 -10 0 -8 -4 -15 -10 -15 -5
0 -10 -5 -10 -11 0 -6 7 -9 15 -5 8 3 15 1 15 -4 0 -6 -140 -10 -375 -10
l-374 0 -15 53 c-22 79 -126 485 -126 493 0 3 7 1 16 -7 13 -10 17 -10 25 2z
m713 -7 c9 -24 2 -26 -12 -4 -7 11 -8 20 -3 20 5 0 12 -7 15 -16z m686 -37
l45 -12 -3 -60 c-4 -73 -20 -238 -28 -283 -10 -52 -39 -60 -261 -77 -109 -8
-221 -15 -249 -15 l-51 0 -10 47 c-13 56 -11 58 61 67 28 4 105 22 171 41 66
18 132 36 146 39 l27 6 -5 124 c-5 116 -5 124 13 129 34 8 98 6 144 -6z
m-1341 -419 c16 -64 36 -98 57 -98 9 0 27 -9 41 -20 23 -18 41 -20 161 -20
l136 0 73 -75 c40 -41 78 -75 83 -75 29 0 2 -22 -65 -54 -55 -26 -89 -36 -125
-36 -61 0 -80 -7 -80 -32 0 -17 -12 -12 -102 34 -56 28 -126 71 -155 95 -29
24 -53 39 -53 34 0 -9 58 -63 100 -94 14 -10 1 -5 -29 10 -30 15 -68 42 -86
60 -59 57 -83 178 -49 246 14 29 61 77 75 77 3 0 11 -24 18 -52z m1160 -114
c18 -13 25 -14 31 -4 8 13 73 -67 105 -130 25 -48 24 -127 0 -169 -23 -38
-100 -88 -110 -72 -3 6 14 21 39 33 26 12 46 26 46 31 0 5 -7 7 -15 3 -11 -4
-9 3 6 23 11 16 19 37 17 47 -3 15 -8 11 -20 -16 -8 -20 -28 -44 -44 -55 -16
-10 -35 -24 -41 -31 -15 -15 -155 -49 -323 -78 -73 -13 -137 -29 -153 -40 -23
-16 -32 -17 -51 -7 -21 12 -113 5 -171 -13 -30 -10 -79 26 -130 95 -62 84 -60
99 10 99 63 0 166 44 358 152 226 127 385 174 446 132z m-328 -49 c-40 -19
-76 -35 -80 -35 -7 0 -31 43 -31 55 0 2 35 6 78 8 42 1 84 4 92 5 8 1 -18 -14
-59 -33z m-327 9 c3 -8 10 -12 16 -9 6 4 8 11 5 16 -4 5 29 9 79 9 l86 0 19
-39 20 -39 -67 -35 c-55 -28 -71 -33 -89 -24 -13 6 -23 19 -23 31 0 32 -11 66
-22 66 -5 0 -6 -16 -2 -37 4 -21 5 -36 2 -33 -2 3 -26 29 -53 58 l-48 52 36 0
c22 0 37 -6 41 -16z m-470 -284 c32 -12 52 -73 37 -112 -9 -25 -13 -27 -36
-18 -113 43 -149 107 -72 129 43 12 42 12 71 1z m1143 -76 c12 -18 11 -24 -4
-43 -18 -23 -121 -64 -135 -55 -10 6 -10 75 0 90 8 13 78 33 106 31 10 -1 25
-11 33 -23z m-1177 -53 c52 -26 58 -31 30 -26 -44 9 -82 28 -101 51 -16 19
-17 20 71 -25z m1181 -20 c-12 -22 -80 -51 -119 -50 -19 0 -8 6 34 20 34 10
67 26 74 34 17 21 23 19 11 -4z m-853 -3 c-5 -15 -48 -24 -48 -10 0 14 12 22
33 22 10 0 17 -5 15 -12z m482 -8 c11 -6 12 -12 4 -20 -13 -13 -44 -2 -44 16
0 16 18 18 40 4z m-630 -30 c36 -10 56 -19 45 -19 -21 0 -137 36 -120 38 6 0
39 -8 75 -19z m843 -17 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5 14 0 19 -2 13 -5z
m-740 -10 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5 14 0 19 -2 13 -5z m667 -3 c-14
-4 -41 -8 -60 -8 l-35 1 40 7 c57 10 87 10 55 0z m-103 -16 c-3 -3 -12 -4 -19
-1 -8 3 -5 6 6 6 11 1 17 -2 13 -5z"
            />
            <path
              d="M2502 3578 c-20 -20 -14 -66 9 -79 33 -17 69 3 69 39 0 33 -16 52
-45 52 -12 0 -26 -5 -33 -12z m63 -32 c0 -29 -31 -44 -50 -25 -23 23 -9 51 24
47 18 -2 26 -9 26 -22z"
            />
            <path
              d="M2625 3350 c3 -5 33 -10 66 -10 33 0 59 4 59 10 0 6 -29 10 -66 10
-41 0 -63 -4 -59 -10z"
            />
            <path
              d="M970 3305 c0 -14 5 -25 10 -25 6 0 10 -8 11 -17 0 -14 2 -15 6 -3 4
8 14 22 23 30 15 13 15 17 4 28 -7 6 -22 12 -34 12 -15 0 -20 -6 -20 -25z"
            />
            <path
              d="M1422 3318 c-9 -9 -7 -14 5 -23 23 -17 58 2 41 22 -13 16 -30 17 -46
1z"
            />
            <path
              d="M1870 3320 c0 -5 -8 -10 -17 -11 -14 0 -15 -2 -3 -6 19 -8 35 -24 43
-43 4 -12 6 -11 6 3 1 9 6 17 11 17 6 0 10 11 10 25 0 20 -5 25 -25 25 -14 0
-25 -4 -25 -10z"
            />
            <path
              d="M2620 3310 c0 -6 28 -10 65 -10 37 0 65 4 65 10 0 6 -28 10 -65 10
-37 0 -65 -4 -65 -10z"
            />
            <path
              d="M1338 3303 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M1378 3303 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M1768 3303 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M1808 3303 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M2190 3220 l0 -80 58 0 c49 0 62 4 81 24 18 19 22 33 19 77 l-3 54
-77 3 -78 3 0 -81z m140 20 c0 -33 -3 -40 -20 -40 -15 0 -20 -7 -20 -25 0 -23
-4 -25 -45 -25 l-45 0 0 65 0 65 65 0 65 0 0 -40z"
            />
            <path
              d="M2625 3270 c-4 -6 18 -10 59 -10 37 0 66 4 66 10 0 6 -26 10 -59 10
-33 0 -63 -4 -66 -10z"
            />
            <path
              
              d="M1050 3005 l0 -255 395 0 395 0 0 255 0 255 -395 0 -395 0 0 -255z
m780 72 l0 -173 -40 -39 -40 -39 -118 117 -117 117 -50 -50 -50 -50 -80 80
-80 80 -97 -97 -98 -98 0 163 0 162 385 0 385 0 0 -173z m-365 -87 l49 50 118
-117 118 -117 40 39 40 39 0 -57 0 -57 -385 0 -385 0 0 67 0 68 97 97 98 98
80 -80 81 -80 49 50z"
            />
            <path
              
              d="M1652 3169 c-33 -13 -49 -53 -32 -84 14 -26 49 -41 74 -32 8 3 23 18
32 33 16 23 16 29 3 52 -17 30 -46 42 -77 31z m52 -25 c30 -30 13 -74 -29 -74
-60 0 -59 88 2 90 6 0 19 -7 27 -16z"
            />
            <path
              d="M991 3224 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 3224 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              
              d="M420 3180 c0 -34 -22 -40 -50 -15 -15 13 -19 12 -45 -15 -26 -27 -27
-31 -13 -52 20 -31 12 -48 -23 -48 -29 0 -30 -1 -27 -42 3 -38 6 -43 30 -46
31 -4 43 -26 22 -42 -20 -18 -17 -33 11 -60 23 -22 25 -22 50 -6 30 20 45 14
45 -20 0 -22 4 -24 45 -24 41 0 45 2 45 24 0 34 15 40 45 20 25 -16 27 -16 50
6 28 27 31 42 11 60 -21 16 -9 38 22 42 24 3 27 8 30 46 3 41 2 42 -27 42 -35
0 -43 17 -23 48 14 21 13 25 -13 52 -26 27 -30 28 -45 15 -28 -25 -50 -19 -50
15 0 29 -2 30 -45 30 -43 0 -45 -1 -45 -30z m70 -10 c0 -12 10 -25 25 -32 20
-9 28 -8 43 5 18 16 20 16 37 -3 14 -16 15 -23 6 -34 -20 -24 -9 -59 19 -66
18 -4 26 -13 28 -33 3 -23 0 -27 -21 -27 -31 0 -53 -42 -31 -60 18 -16 18 -34
-1 -50 -11 -9 -19 -9 -35 3 -30 21 -60 10 -67 -24 -4 -22 -11 -29 -29 -29 -19
0 -24 5 -24 25 0 33 -36 49 -66 30 -19 -12 -24 -12 -40 6 -16 18 -16 21 -2 36
23 22 4 63 -29 63 -21 0 -24 4 -21 27 2 20 10 29 28 33 28 7 39 42 19 66 -9
11 -8 18 6 34 17 19 19 19 37 3 15 -13 23 -14 43 -5 15 7 25 20 25 32 0 15 7
20 25 20 18 0 25 -5 25 -20z"
            />
            <path
              
              d="M423 3088 c-29 -14 -55 -70 -47 -103 14 -56 93 -83 142 -49 52 36 48
120 -8 149 -33 17 -56 18 -87 3z m96 -34 c53 -67 -13 -148 -88 -110 -46 24
-54 67 -20 110 15 19 30 26 54 26 24 0 39 -7 54 -26z"
            />
            <path
              d="M991 3184 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 3184 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 3144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 3144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 3104 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 3104 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 3064 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 3064 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M981 3026 c-10 -12 -10 -19 1 -35 13 -19 14 -19 25 -1 9 13 9 22 -1
35 -11 15 -13 15 -25 1z"
            />
            <path
              d="M1881 3026 c-10 -12 -10 -19 1 -35 13 -19 14 -19 25 -1 9 13 9 22 -1
35 -11 15 -13 15 -25 1z"
            />
            <path
              
              d="M733 2960 c-4 -15 -11 -18 -27 -14 -29 7 -66 -30 -48 -48 18 -18 15
-28 -8 -28 -16 0 -20 -7 -20 -30 0 -16 3 -30 8 -30 4 0 13 -4 21 -9 12 -8 13
-12 1 -26 -11 -14 -10 -19 8 -38 17 -17 24 -19 34 -9 17 17 25 15 31 -8 4 -15
14 -20 36 -20 24 0 31 4 31 20 0 23 10 26 28 8 18 -18 55 19 48 48 -5 17 -1
24 14 29 30 10 27 53 -5 65 -22 8 -24 12 -13 29 10 17 9 23 -7 41 -13 14 -22
17 -29 10 -17 -17 -36 -11 -36 10 0 29 -60 29 -67 0z m50 -21 c5 -19 11 -21
42 -15 l36 7 -6 -34 c-6 -30 -4 -36 14 -42 27 -8 27 -31 0 -38 -16 -4 -20 -12
-17 -39 2 -25 0 -32 -12 -29 -34 8 -45 5 -55 -16 -12 -28 -35 -30 -35 -4 0 24
-28 35 -47 20 -20 -17 -41 4 -24 24 15 19 4 47 -20 47 -10 0 -19 7 -19 15 0 8
7 15 15 15 19 0 36 32 25 50 -13 22 -2 30 31 23 25 -5 31 -2 36 16 7 27 29 27
36 0z"
            />
            <path
              
              d="M720 2880 c-27 -27 -25 -56 5 -85 27 -28 37 -30 68 -14 29 16 37 28
37 60 0 54 -70 79 -110 39z m72 -2 c24 -20 28 -44 12 -67 -27 -37 -84 -22 -84
23 0 22 27 56 45 56 6 0 18 -6 27 -12z"
            />
            <path
              d="M991 2944 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 2944 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 2904 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 2904 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 2864 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 2864 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 2824 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 2824 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 2784 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M1891 2784 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"
            />
            <path
              d="M991 2748 c-1 -10 -5 -18 -11 -18 -5 0 -10 -11 -10 -25 0 -19 5 -25
20 -25 12 0 27 6 34 12 11 11 11 15 -4 28 -9 8 -19 22 -23 30 -4 12 -6 11 -6
-2z"
            />
            <path
              d="M1422 2718 c-9 -9 -7 -14 5 -23 23 -17 58 2 41 22 -13 16 -30 17 -46
1z"
            />
            <path
              d="M1338 2703 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M1378 2703 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M1768 2703 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M1808 2703 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"
            />
            <path
              d="M640 2440 l0 -80 58 0 c79 0 102 23 102 103 l0 57 -80 0 -80 0 0 -80z
m150 20 c0 -36 -2 -40 -25 -40 -20 0 -25 -5 -25 -25 0 -22 -4 -25 -40 -25
l-40 0 0 65 0 65 65 0 65 0 0 -40z"
            />
            <path
              d="M1412 2325 c3 -21 48 -35 48 -16 0 7 22 11 53 11 l52 0 -30 -19 c-40
-24 -83 -76 -91 -109 -4 -15 -14 -39 -22 -54 -18 -31 -6 -55 23 -44 12 4 14
14 10 40 -13 67 54 154 136 176 32 9 48 9 64 0 17 -9 27 -9 41 0 15 9 30 9 61
1 83 -22 151 -110 138 -177 -4 -26 -2 -36 10 -40 32 -13 39 12 16 58 -11 25
-21 49 -21 55 0 17 -51 74 -85 94 l-30 19 53 0 c30 0 52 -4 52 -11 0 -19 45
-5 48 16 3 20 -3 20 -263 20 -260 0 -266 0 -263 -20z m33 -205 c3 -5 1 -10 -4
-10 -6 0 -11 5 -11 10 0 6 2 10 4 10 3 0 8 -4 11 -10z m475 0 c0 -5 -5 -10
-11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z"
            />
            <path
              d="M360 2260 c0 -7 142 -10 405 -10 263 0 405 3 405 10 0 7 -142 10
-405 10 -263 0 -405 -3 -405 -10z"
            />
            <path
              d="M360 2200 c0 -7 142 -10 405 -10 263 0 405 3 405 10 0 7 -142 10
-405 10 -263 0 -405 -3 -405 -10z"
            />
            <path
              d="M365 2140 c-3 -6 0 -12 7 -15 26 -10 633 0 633 10 0 14 -631 19 -640
5z"
            />
            <path
              d="M2016 2005 c-3 -8 2 -21 10 -30 19 -19 44 -4 44 26 0 23 -45 27 -54
4z m34 -5 c0 -5 -5 -10 -11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4
-10z"
            />
            <path
              d="M2130 1880 c0 -6 75 -10 205 -10 130 0 205 4 205 10 0 6 -75 10 -205
10 -130 0 -205 -4 -205 -10z"
            />
            <path
              d="M1410 1833 c-41 -15 -51 -62 -20 -93 18 -18 33 -20 140 -20 107 0
122 2 140 20 32 32 25 66 -17 89 -22 11 -214 15 -243 4z m254 -35 c8 -13 8
-23 0 -35 -10 -16 -28 -18 -140 -18 -127 0 -129 0 -132 23 -7 47 11 53 141 50
101 -3 122 -6 131 -20z"
            />
            <path
              d="M1790 1833 c-41 -15 -51 -62 -20 -93 19 -19 32 -21 150 -19 l128 1
12 28 c15 37 5 69 -27 81 -25 9 -217 11 -243 2z m254 -35 c8 -13 8 -23 0 -35
-10 -16 -28 -18 -140 -18 -127 0 -129 0 -132 23 -7 47 11 53 141 50 101 -3
122 -6 131 -20z"
            />
            <path
              d="M2130 1820 c0 -6 75 -10 205 -10 130 0 205 4 205 10 0 6 -75 10 -205
10 -130 0 -205 -4 -205 -10z"
            />
            <path
              d="M2137 1763 c-19 -18 3 -23 113 -23 100 0 120 3 120 15 0 12 -19 15
-113 15 -63 0 -117 -3 -120 -7z"
            />
            <path
              d="M2590 1162 c0 -10 -7 -27 -15 -39 -13 -19 -13 -23 6 -47 23 -30 69
-35 89 -10 19 22 16 70 -5 94 -23 26 -75 27 -75 2z m70 -23 c14 -25 12 -45 -6
-63 -20 -21 -30 -20 -54 4 -19 19 -18 29 13 77 10 15 35 6 47 -18z"
            />
            <path
              d="M2815 502 c23 -23 385 -64 385 -43 0 6 -16 11 -37 11 -37 1 -225 22
-313 36 -31 4 -42 3 -35 -4z"
            />
            <path
              d="M3243 473 c-13 -2 -23 -9 -23 -15 0 -6 10 -8 23 -4 12 3 25 6 30 6 4
0 7 5 7 10 0 6 -3 9 -7 9 -5 -1 -18 -4 -30 -6z"
            />
            <path
              
              d="M3525 3765 c-60 -16 -131 -86 -141 -141 -6 -31 -9 -34 -41 -34 -19 0
-47 -7 -62 -15 -35 -18 -79 -69 -87 -101 -3 -13 -13 -24 -21 -24 -8 0 -28 -13
-44 -29 -21 -22 -29 -39 -29 -66 0 -27 8 -44 29 -66 l29 -29 211 0 211 0 0
-67 c0 -61 -1 -65 -15 -47 -12 16 -14 16 -15 3 0 -9 9 -24 20 -34 20 -18 21
-18 45 5 26 25 26 42 0 20 -13 -11 -15 -4 -15 54 l0 66 191 0 c117 0 198 4
211 11 40 21 55 99 26 136 -5 6 -10 36 -12 66 -7 115 -86 197 -198 205 -56 4
-68 9 -104 42 -23 21 -56 41 -75 45 -19 3 -41 8 -49 10 -8 2 -37 -3 -65 -10z
m130 -24 c23 -10 53 -33 68 -50 23 -27 32 -32 56 -26 37 8 98 -8 142 -38 46
-30 79 -98 79 -162 0 -28 7 -58 15 -69 18 -24 19 -65 2 -87 -26 -34 -54 -39
-236 -39 l-181 0 0 36 c0 21 -4 33 -10 29 -5 -3 -10 -19 -10 -36 l0 -29 -204
0 c-188 0 -205 2 -229 20 -13 11 -28 31 -31 45 -9 34 18 83 50 91 18 5 31 19
44 48 29 67 84 106 149 106 24 0 30 6 40 40 23 78 103 140 181 140 19 0 53 -9
75 -19z"
            />
            <path
              
              d="M3580 3515 c0 -14 5 -25 10 -25 6 0 10 11 10 25 0 14 -4 25 -10 25
-5 0 -10 -11 -10 -25z"
            />
            <path
              
              d="M3580 3415 c0 -25 5 -45 10 -45 6 0 10 20 10 45 0 25 -4 45 -10 45
-5 0 -10 -20 -10 -45z"
            />
            <path
              d="M2787 3572 c-24 -26 -21 -49 7 -67 45 -30 91 16 61 61 -19 29 -46 31
-68 6z m58 -32 c0 -18 -6 -26 -23 -28 -13 -2 -25 3 -28 12 -10 26 4 48 28 44
17 -2 23 -10 23 -28z"
            />
            <path
              
              d="M3810 2275 c0 -33 -22 -41 -52 -21 -23 15 -26 14 -53 -14 -27 -29
-28 -30 -11 -56 20 -29 14 -41 -24 -46 -22 -3 -25 -8 -25 -48 0 -40 3 -45 25
-48 38 -5 44 -17 24 -46 -17 -26 -16 -27 11 -56 27 -28 30 -29 53 -14 30 20
52 12 52 -21 0 -23 4 -25 45 -25 41 0 45 2 45 25 0 32 23 41 52 21 21 -15 24
-14 50 11 31 30 35 45 14 63 -21 16 -9 38 22 42 25 3 27 7 27 48 0 41 -2 45
-27 48 -31 4 -43 26 -22 42 21 18 17 33 -14 63 -26 25 -29 26 -50 11 -29 -20
-52 -11 -52 21 0 23 -4 25 -45 25 -41 0 -45 -2 -45 -25z m80 -14 c0 -35 35
-49 62 -24 17 15 20 15 38 -2 24 -22 25 -33 5 -55 -13 -14 -13 -19 1 -38 8
-12 24 -22 35 -22 14 0 19 -7 19 -30 0 -25 -4 -30 -23 -30 -31 0 -53 -43 -31
-60 19 -17 18 -34 -4 -53 -16 -15 -21 -15 -39 -2 -31 22 -63 9 -63 -26 0 -26
-3 -29 -35 -29 -32 0 -35 3 -35 29 0 35 -35 49 -62 24 -17 -15 -20 -15 -38 2
-24 21 -25 38 -6 55 22 17 0 60 -31 60 -19 0 -23 5 -23 30 0 23 5 30 19 30 11
0 27 10 35 22 14 19 14 24 1 38 -20 22 -19 33 5 55 18 17 21 17 38 2 27 -25
62 -11 62 24 0 26 3 29 35 29 32 0 35 -3 35 -29z"
            />
            <path
              
              d="M3833 2182 c-31 -5 -73 -58 -73 -92 0 -16 11 -42 26 -59 21 -26 33
-31 69 -31 36 0 48 5 69 31 33 39 33 79 1 117 -25 30 -52 40 -92 34z m73 -35
c20 -17 27 -33 27 -57 0 -24 -7 -40 -27 -57 -34 -28 -65 -29 -100 -2 -37 29
-37 89 0 118 35 27 66 26 100 -2z"
            />
            <path
              d="M1205 1321 c-49 -22 -104 -82 -112 -123 -6 -32 -8 -33 -68 -43 -45
-8 -125 -79 -125 -112 0 -12 -13 -25 -36 -36 -49 -24 -70 -74 -50 -121 25 -60
50 -66 275 -66 l200 0 4 -42 4 -43 1 43 2 42 179 0 c101 0 191 5 209 11 56 19
78 84 47 139 -8 14 -15 45 -15 70 -1 119 -118 224 -230 208 -25 -4 -35 1 -51
23 -44 62 -155 86 -234 50z m177 -23 c21 -12 45 -32 53 -45 13 -19 24 -23 71
-23 116 0 204 -86 204 -200 0 -23 7 -55 16 -72 18 -36 12 -69 -18 -98 -21 -19
-34 -20 -430 -20 l-409 0 -24 25 c-33 32 -33 78 0 110 13 14 31 25 39 25 8 0
24 19 34 43 28 62 61 88 123 95 51 7 52 7 65 52 34 117 167 169 276 108z"
            />
            <path
              d="M1270 1081 c-12 -17 -17 -31 -11 -31 5 0 13 6 18 13 4 7 10 -36 14
-98 l5 -110 2 114 c2 113 2 114 22 96 29 -26 25 -3 -4 24 l-24 22 -22 -30z"
            />
            <path
              d="M1292 690 c0 -19 2 -27 5 -17 2 9 2 25 0 35 -3 9 -5 1 -5 -18z"
            />
          </g>
        </svg>

You can use transform-box: fill-box; with transform-origin: 50% 50%;

@keyframes rotating-grind {
  from {
    transform: rotate(0deg);     
  }
  to {
    transform: rotate(360deg);    
  }
}

.grind {
  animation: rotating-grind 5s infinite linear; 
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
  • Related