<style>
/* первый элемент */
svg .svg-elem-1 {
  fill: transparent;
  -webkit-transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
svg.active .svg-elem-1 {
  fill: rgb(255, 255, 255);
}
svg .svg-elem-2 {
  fill: transparent;
  -webkit-transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
svg.active .svg-elem-2 {
  fill: rgb(0, 0, 0);
}
svg .svg-elem-3 {
  fill: transparent;
  -webkit-transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}
svg.active .svg-elem-3 {
  fill: rgb(0, 0, 0);
}
svg .svg-elem-4 {
  fill: transparent;
  -webkit-transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}
svg.active .svg-elem-4 {
  fill: rgb(0, 0, 0);
}
svg .svg-elem-5 {
  fill: transparent;
  -webkit-transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}
svg.active .svg-elem-5 {
  fill: rgb(0, 0, 0);
}
svg .svg-elem-6 {
  fill: transparent;
  -webkit-transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}
svg.active .svg-elem-6 {
  fill: rgb(0, 0, 0);
}

/* второй элемент */
svg .svg-elem-two-1 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
svg.active .svg-elem-two-1 {
  fill: rgb(255, 255, 255);
}
svg .svg-elem-two-2 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
svg.active .svg-elem-two-2 {
  fill: rgb(255, 255, 255);
}
svg .svg-elem-two-3 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
svg.active .svg-elem-two-3 {
  fill: rgb(255, 255, 255);
}
svg .svg-elem-two-4 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}
svg.active .svg-elem-two-4 {
  fill: rgb(255, 255, 255);
}
svg .svg-elem-two-5 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}
svg.active .svg-elem-two-5 {
  fill: rgb(255, 255, 255);
}
</style>

<script>
$(document).ready(function() {
    // появление/скрытие элементов по скроллу
	let windowHeight = $(window).height();
 
	$(document).on('scroll', function() {
		$('.block svg').each(function() { // .block класс анимируемого изображения
			let self = $(this),
			height = self.offset().top + self.height();
			if ($(document).scrollTop() + windowHeight >= height) {
			    self.addClass('active')
			} else {
			    self.removeClass('active')
			}
		});
	});
	
	// появление/скрытие элементов по клику
	$('.click-btn').on('click', function() { // .click-btn класс элемента триггера
		$('.block svg').toggleClass('active'); // .block класс анимируемого изображения
	});
	
	// появление/скрытие элементов по наведению
    $('.hover-btn').hover(function () { // .hover-btn класс элемента триггера
        $('.block svg').toggleClass('active'); // .block класс анимируемого изображения
    });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>