Анимация на SVG

Question

Помогите с созданием анимационной svg.

Пример анимации: https://codepen.io/supah/pen/BjYLdW

Долго искал, пытался но ничего не выходит. Есть готовая svg

.ub-spinner {     
    position: absolute;     
    left: 50%;     
    top: 50%;     
    width: clamp(50px, 15%, 200px);
    fill: #fff; 
    transform: translate(-50%, -50%); 
}

<svg viewBox="0 0 128 128" class="ub-spinner">
    <g>
        <path d="M64 9.75A54.25 54.25 0 0 0 9.75 64H0a64 64 0 0 1 128 0h-9.75A54.25 54.25 0 0 0 64 9.75z"></path>
        <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1200ms" repeatCount="indefinite"></animateTransform>
     </g>
 </svg>

Пытался редактировать, но как всегда все криво на выходе.

Как сделать чтобы viewBox="0 0 36 36"

Было бы потрясающе, если удалось выполнить анимацию на svg такую же как в примере по ссылке

Целый день просидел, ну не выходит. Подскажите пожалуйста, каким редактором вы пользуетесь?

Answer 1

Чтоб сделать viewBox="0 0 36 36" нужно уменьшить размер кривой или будет видно только четверть рисунка. Если же надо уменьшить сам рисунок, то проще задать ширину в css вместо clamp.

Длинна арки анимируется как длинна штриха контура круга. То что анимация stroke-dasharray не кладется на вашу арку - это из-за того что она оконтурена. Чтоб вcё исправить надо нарисовать новый рисунок по сути.

<svg class="spinner" viewBox="0 0 36 36">
  <circle class="path" cx="18" cy="18" r="16" fill="none" stroke-width="4"></circle>
</svg>

Или если хочется крутить арку, то она должна быть не оконтурена чтоб осталось что анимировать.

M 2,18 C 2,9 9,2 18,2 27,2 34,9 34,18

Арка конечно у меня получилась кривовата... Но если не приглядываться - не заметно

html, body {
  height: 100%;
  background: #333
}
.ub-spinner {     
    position: absolute;     
    left: 50%;     
    top: 50%;     
    width: clamp(50px, 15%, 200px);
    transform: translate(-50%, -50%);
}

<svg viewBox="0 0 36 36" class="ub-spinner">
    <g>
      <path d="M 2,18 C 2,9 9,2 18,2 27,2 34,9 34,18" stroke-dasharray="52 52" fill="none"  stroke="white">
          <animate attributeName="stroke-dasharray" values="2 52; 52 52;2 52" dur="2000ms" repeatCount="indefinite" />
      </path>
      <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1500ms" repeatCount="indefinite"></animateTransform>
     </g>
 </svg>

Также как в примере с кругом можно бы добавить stroke-dashoffset анимацию, но она не будет красивой так как арка из path в отличие от круга не замкнута.

Answer 2

Вместо дуги можно использовать circle, у которой с помощью анимации stroke-dasharray вырезать сегменты, а с помощью анимации animateTransform одновременно вращать окружность с вырезанными сегментами.
Как-то так:

html, body {
  height: 100%;
  background-image: linear-gradient(-105deg, #009acc, #363795);
}
  
   .path {
     fill:none;
    stroke: #C1CFDB;
    stroke-width:3;
    stroke-linecap: round;
    stroke-dashoffset:100.5;
    stroke-dasharray:100.5; 
    animation: dash 1.5s ease-in-out infinite;
   
  }
  @keyframes dash {
  0% {
    stroke-dasharray: 0, 100;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 65, 35;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 65, 100;
    stroke-dashoffset: -100.5;
  }
}

<svg class="spinner" width="72" height="72" viewBox="0 0 36 36">
  <circle class="path" cx="18" cy="18" r="16" >
  <animateTransform  attributeName="transform" type="rotate"  dur="6s" values="0 18 18;360 18 18" repeatCount="indefinite" /> 
  </circle>
</svg>

Решение SMIL

html, body {
  height: 100%;
  background-image: linear-gradient(-105deg, #009acc, #363795);
}
.container {
width:10vw;
height:10vh;
}

<div class="container">
<svg class="spinner" viewBox="0 0 36 36">
  <circle class="path" cx="18" cy="18" r="16" fill="none" stroke="#C1CFDB" stroke-width="3" stroke-linecap="round" stroke-dashoffset="100.5"  stroke-dasharray="100.5">
  <animate attributeName="stroke-dasharray" dur="1.5s" values="0,100;65,35;65,100" repeatCount="indefinite" /> 
   <animate attributeName="stroke-dashoffset" dur="1.5s" values="0;-35;-100.5" repeatCount="indefinite" />
  <animateTransform  attributeName="transform" type="rotate"  dur="6s" values="0 18 18;360 18 18" repeatCount="indefinite" /> 
  </circle>
</svg>
</div>

БЛОГ НА HUSL

Анимация на SVG

Ответы (2 шт):

Решение SMIL