csssvgcss-animationstransformrotatetransform

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


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;
}

Solution

  • @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" class="svg">
              <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
                  class="message-box"
                  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
                  class="screen"
                  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
                  class="sun"
                  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
                  class="grind"
                  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
                  class="grind"
                  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
                  class="grind"
                  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
                  class="grind"
                  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
                  class="cloud cloud-front"
                  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
                  class="cloud"
                  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
                  class="cloud"
                  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
                  class="grind"
                  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
                  class="grind"
                  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%;
    }