Как залить фоновый цвет в SVG изображении луны в процентах

#javascript #css #html5 #svg #svg_animation

Я хочу, чтобы  цвет фонового изображения SVG заполнялся постепенно, в процентах.

Вот изображение луны svg. Я хочу постепенно, в процентах заполнять её белым цветом.     



 




    

Ответы

Ответ 1

Как-то так можно посчитать точки пересечения окружностей, 
для конструирования пути



requestAnimationFrame(draw);

function draw(t) {
  requestAnimationFrame(draw);
  let r = 51;
  let x = Math.sin(t/2010)*90;
  let y = Math.sin(t/1731)*40;
  let a = Math.atan2(y, x);
  let s = Math.acos(Math.sqrt(x*x + y*y)/2/r);
  let p0 = [Math.cos(a+s)*r, Math.sin(a+s)*r];
  let p1 = [Math.cos(a-s)*r, Math.sin(a-s)*r];
  sun.setAttribute('d', `
      m${p0}
      A${r},${r},0,1,1,${p1}
      A${r},${r},0,0,0,${p0}
      z
  `);
}
body{
  overflow: hidden;
  margin: 0;
}



Ответ 2

Я бы сделал это с маской.

Так что, я могу сделать эллиптическую тень.

Пояснения смотрите в комментариях скрипта  



// Установить handler на input слайдера
var control = document.getElementById("control");
control.addEventListener("input", setMoonPhase);

// Инициализируйте SVG из начального значения слайдера
setMoonPhase();

function setMoonPhase(evt) {
  // Преобразовать из процента в значение 0..1
  var val = control.value / 100;
  // Получить элемент эллипса, который представляет фазу луны
  var  phaseEllipse = document.getElementById("phase-ellipse");
  // Установите радиус X фазового эллипса (где 100% = 0,5 -> 50% = 0 -> 0% = 0,5)
  phaseEllipse.rx.baseVal.value = Math.abs(val - 0.5);
  // Если фаза> 50%, то эллипс должен быть белым.
  // В противном случае это черный цвет, чтобы сделать дыру в маске, чтобы пропустить
черный фон.
  phaseEllipse.style.fill = (val > 0.5) ? "white" : "black";
}








Источник: @Paul LeBeau


Ответ 3

Я бы сделал это с помощью clip-path.   



mooning()


control.addEventListener("input",()=>{
mooning()
})


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

function mooning(){
output.innerHTML = control.value + "%";
let value = map(control.value, 0, 100, -25, 175)
moon.setAttributeNS(null, "cx", value)
}
svg{border:1px solid; width:75vh}
#control{width:75vh;}







Источник: @enxaneta


Ответ 4

Анимация окружностей

Я бы сделал это с применением анимации чёрной окружности, которая постепенно и открывает
и снова закрывает светлую окружность. 








Источник: @Alexandr_TT