Создание прелоадера SVG не круглой формы

#javascript #html #css #css3 #svg

Необходимо создать SVG прелоадер для сайта, но не умею работать с самими SVG (рисовать
правильно). Идея такая: 



При загрузке индикатором выступает градиентная полоска, которая постепенно заполняет
объект, попыток решения нет, т.к. для этого нужно нарисовать саму SVG и как-то через
path (наверно) выставлять уже значения заполнения. 

Подскажите, как можно это сделать?
    

Ответы

Ответ 1

Вот вариант с маской, путь ровный т.к. подбирал точки дуги и кривой Безье перебором =)

Фокус с покачивающимся окончанием линии сделан при помощи вращающегося прямоугольника,
который закрыт той же маской, за которой прячется и градиентный фон.



requestAnimationFrame(frame);

function frame(t){
  fill.setAttribute('stroke-dasharray', `${t/40} 1000`);
  let p1 = fill.getPointAtLength(t/40);
  let p2 = fill.getPointAtLength(t/40+2);
  let dy = p2.y - p1.y;
  let dx = p2.x - p1.x;
  let a = dy - dx ? Math.atan2(dy, dx)*180/Math.PI+90+Math.sin(t/280)*20 : 90;
  end.setAttribute('transform', `translate(${p1.x},${p1.y})rotate(${a})`);
  requestAnimationFrame(frame);
}



Ответ 2

Решение SVG filter

Как возможный вариант решения, так как ТС не указал в деталях способ заполнения лоадера.  

Горизонтальное заполнение:



.container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);
filter: url(#violet-fill);

}







Вертикальное заполнение: 



.container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);
filter: url(#violet-fill);

}





Ответ 3

Может программу какую-нибудь посоветуете или что-то в этом роде?
  ресурс? 


Чтобы нарисовать svg фигуру нужен векторный редактор или для рисования кривых Безье
какой-нибудь генератор. В этом топике даны примеры и ссылки на подобного рода инструменты
для рисования патчей.  

Создание патча по заданной форме на рисунке:


Загружаем картинку кривой в векторный редактор и наносим узловые
точки с помощью инструмента - Рисовать кривые Безье  На
рисунке это красные стрелки





Рычагами управления (синие стрелки) придаем нужную форму кривой,
чтобы она совпадала с контурами фигуры.
Сохраняем файл в формате *.svg
Добавляем градиент 




.container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);
}







Создание  анимации

Можно использовать анимацию с помощью изменения stroke-dashoffset от максимума до нуля.  

Для создания path, кривой линии, вдоль которой будет идти  анимация закраски фигуры,
снова используем векторный редактор: 



Чтобы линия заполняла всю фигуру по ширине, задаем - stroke-width:15.5px; 



.container {
width:50%;
height:50%;

}

#path2 {
stroke-width:15.5;
stroke:#5050E1;
fill:none;
stroke-dasharray: 240 240;
  stroke-dashoffset: 240;
animation: draw 6s 1s ease infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 240;
  }

  to {
    stroke-dashoffset: 0;
  }
}   








Собираем всё вместе

Фигуру svg c градиентом и анимацию её заполнения: 



.container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);

}
#path2 {
stroke-width:15.5;
stroke:#5050E1;
fill:none;
stroke-dasharray: 240 240;
  stroke-dashoffset: 240;
animation: draw 6s 1s ease infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 240;
  }

  to {
    stroke-dashoffset: 0;
  }
}