Как можно сделать такую анимацию?

Question

[Роман Макаров]

Есть необходимость сделать анимацию поверх изображения (Что-то вроде точек-шумов), которые будут перемещаться по дуге. Как это можно сделать?
Вот какие мысли есть:
css-анимация: Взять большую png и transform: rotate + overflow: hidden на родителе. Выглядит как большой костыль (будут ли тратится ресурсы на отрисовку невидимой части?)
решине в лоб: каким-либо образом сделать gif
svg анимации?
вот мокап (полукруг внизу должен оставаться чистым):

Стоит учесть что величина изображения 100vh/vw
Раньше не сталкивался с такими задачами, даже не знаю с какой стороны подойти.

Comments

[Anton Filippov]

для производительности лучше на свг делать

[copal]

И рисовать лучше руками.

[Роман Макаров]

copal: Anton Filippov: какие-либо библиотеки или самому?

[Anton Filippov]

Роман Макаров: ну по сути тут достаточно сделать диск в точечку и крутить его, можно и без библиотек обойтись - www.petercollingridge.co.uk/blog/svg-animation-rot...

[Роман Макаров]

Anton Filippov: так, круг и анимацию сделал, теперь вопрос в том, как заполнить его точками? т.к. круг адаптивный, то в идеале бы и адаптивный вариант. Тут есть идеи?

Answer 1

[Leonid Fedotov]

Насчёт CSS - вы думаете в очень правильном направлении, если я правильно понял Вашу цель. Но Вы должны понимать что это основательный костыль. Если бы Вы обрисовали задачу более конкретно, Вам бы здесь предложили бы более узкое решение.
Касательно нагрузки, это будет зависеть от самой картинки. Если не шибко большая, где-то до 4000X4000, то вполне потянет, а дальше уже могут пойти зависания, скорее всего.