Анимация вращения svg

Как сделать анимацию вращения круга svg при ховере?
Т.е. на изображении svg в обычном состоянии. А при наведении курсора нужно, чтобы цвет крутился по кругу, как змейка. Можно, чтобы не полный круг был

Ответ

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } .circle { width: 160px; height: 160px; border-radius: 100%; border: #f00 dotted 3px; position: absolute; left: 50%; top: 50%; margin: -80px 0 0 -80px; } .circle:hover { animation: spin 2s infinite linear; } @keyframes spin { 100% { transform: rotate(360deg); } }