Question 413481 in CSS Question posted in
Some basic documentation can be found here.

Animating a path of an SVG icon to spin clockwise from center with CSS

I’m trying to spin/rotate the inner path of this SVG so that it spins clockwise.

Are there any good resources that show the different types of animation approaches available with CSS?

Right now the path is spinning as if it was around a bigger circle. How do I spin the icon from the center point and rotate it clockwise?

  #circle-arrows {
    animation: loader 1.25s infinite;
  }

  @keyframes loader {
    0% {
      rotate: 0deg;
    }

    100% {
      border-radius: 50%;
      rotate: 180deg;
    }
  }
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd">
      <path d="M0 0h24v24H0z" />
      <path
        d="M23 14.864C23 17.696 20.737 20 17.956 20c-.11 0-.236 0-.346-.016V20H6.044c-.11 0-.22 0-.33-.016C3.09 19.808 1 17.584 1 14.864c0-2.16 1.304-4.016 3.159-4.784.157-2.512 2.2-4.48 4.698-4.48.487 0 .959.08 1.399.224h.015A4.993 4.993 0 0 1 14.137 4c2.782 0 5.044 2.304 5.044 5.136 0 .24-.015.48-.062.72C21.35 10.4 23 12.432 23 14.864z"
        fill="#000" fill-rule="nonzero" />
      <path id="circle-arrows"
        d="M16.348 12.98c-.499 2.072-2.209 3.52-4.372 3.52a4.492 4.492 0 0 1-3.082-1.243l-.755.757a.376.376 0 0 1-.264.111.378.378 0 0 1-.375-.375v-2.625c0-.205.17-.375.375-.375H10.5c.205 0 .375.17.375.375 0 .1-.04.193-.11.264l-.804.802a2.991 2.991 0 0 0 4.594-.62c.14-.23.21-.452.31-.687.03-.082.087-.134.176-.134h1.125c.106 0 .187.088.187.187 0 .013 0 .03-.005.042zm.152-2.105c0 .205-.17.375-.375.375H13.5a.378.378 0 0 1-.375-.375c0-.1.04-.193.11-.264l.81-.809A3.016 3.016 0 0 0 12 9c-1.043 0-2.01.539-2.555 1.43-.14.229-.21.451-.31.686-.03.082-.087.134-.176.134H7.793a.189.189 0 0 1-.187-.187v-.042C8.11 8.94 9.838 7.5 12 7.5c1.149 0 2.267.457 3.099 1.243l.762-.757a.376.376 0 0 1 .264-.111c.205 0 .375.17.375.375v2.625z"
        fill="#FFF" fill-rule="nonzero" />
    </g>
  </svg>
Tags:

2

Answers


  1. 0

    As @enxaneta says, add transform-origin: center to #circle-arrows. Read more about transform-origin.

    #circle-arrows {
    animation: loader 1.25s infinite;
  }

  @keyframes loader {
    0% {
      rotate: 0deg;
    }

    100% {
      border-radius: 50%;
      rotate: 180deg;
    }
  }
    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd">
      <path d="M0 0h24v24H0z" />
      <path
        d="M23 14.864C23 17.696 20.737 20 17.956 20c-.11 0-.236 0-.346-.016V20H6.044c-.11 0-.22 0-.33-.016C3.09 19.808 1 17.584 1 14.864c0-2.16 1.304-4.016 3.159-4.784.157-2.512 2.2-4.48 4.698-4.48.487 0 .959.08 1.399.224h.015A4.993 4.993 0 0 1 14.137 4c2.782 0 5.044 2.304 5.044 5.136 0 .24-.015.48-.062.72C21.35 10.4 23 12.432 23 14.864z"
        fill="#000" fill-rule="nonzero" />
      <path id="circle-arrows"
        d="M16.348 12.98c-.499 2.072-2.209 3.52-4.372 3.52a4.492 4.492 0 0 1-3.082-1.243l-.755.757a.376.376 0 0 1-.264.111.378.378 0 0 1-.375-.375v-2.625c0-.205.17-.375.375-.375H10.5c.205 0 .375.17.375.375 0 .1-.04.193-.11.264l-.804.802a2.991 2.991 0 0 0 4.594-.62c.14-.23.21-.452.31-.687.03-.082.087-.134.176-.134h1.125c.106 0 .187.088.187.187 0 .013 0 .03-.005.042zm.152-2.105c0 .205-.17.375-.375.375H13.5a.378.378 0 0 1-.375-.375c0-.1.04-.193.11-.264l.81-.809A3.016 3.016 0 0 0 12 9c-1.043 0-2.01.539-2.555 1.43-.14.229-.21.451-.31.686-.03.082-.087.134-.176.134H7.793a.189.189 0 0 1-.187-.187v-.042C8.11 8.94 9.838 7.5 12 7.5c1.149 0 2.267.457 3.099 1.243l.762-.757a.376.376 0 0 1 .264-.111c.205 0 .375.17.375.375v2.625z"
        fill="#FFF" fill-rule="nonzero" transform-origin="center"/>
    </g>
  </svg>
    Login or Signup to reply.
  2. 0

    Please, this is HTML-5 !
    There is no needs to use xmlns attribute.

    And you must use a viewbox : width and height are standard interface rendering like any html elements…

    svg {
  width      : 240px;
  height     : 240px;
  background : lightblue;
  }
svg .cloud {
  fill      : whitesmoke;
  }
svg .circle-arrows {
  fill      : orange;
  animation : loader 1.25s infinite;
  }
@keyframes loader {
      0% { rotate: 0deg;  }
    100% { border-radius: 50%; rotate: 180deg; }
  }
    <svg viewbox="0 0 24 24">
  <g fill-rule="evenodd">
    <path class="cloud" fill-rule="nonzero" 
      d="M23 14.864C23 17.696 20.737 20 17.956 20c-.11 0-.236 0-.346-.016V20H6.044c-.11 0-.22 0-.33-.016
      C3.09 19.808 1 17.584 1 14.864c0-2.16 1.304-4.016 3.159-4.784.157-2.512 2.2-4.48 4.698-4.48.487 0 .959.08 1.399.224
      h.015A4.993 4.993 0 0 1 14.137 4c2.782 0 5.044 2.304 5.044 5.136 0 .24-.015.48-.062.72C21.35 10.4 23 12.432 23 14.864z"
      />
    <path class="circle-arrows" fill-rule="nonzero" transform-origin="center" 
      d="M16.348 12.98c-.499 2.072-2.209 3.52-4.372 3.52a4.492 4.492 0 0 1-3.082-1.243l-.755.757
      a.376.376 0 0 1-.264.111.378.378 0 0 1-.375-.375v-2.625c0-.205.17-.375.375-.375H10.5
      c.205 0 .375.17.375.375 0 .1-.04.193-.11.264l-.804.802a2.991 2.991 0 0 0 4.594-.62
      c.14-.23.21-.452.31-.687.03-.082.087-.134.176-.134h1.125c.106 0 .187.088.187.187 0 .013 0 .03-.005.042z
      m.152-2.105c0 .205-.17.375-.375.375H13.5a.378.378 0 0 1-.375-.375c0-.1.04-.193.11-.264l.81-.809A3.016 3.016 0 0 0 12 9
      c-1.043 0-2.01.539-2.555 1.43-.14.229-.21.451-.31.686-.03.082-.087.134-.176.134H7.793a.189.189 0 0 1-.187-.187
      v-.042C8.11 8.94 9.838 7.5 12 7.5c1.149 0 2.267.457 3.099 1.243l.762-.757a.376.376 0 0 1 .264-.111
      c.205 0 .375.17.375.375v2.625z"
      />
  </g>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search