Какую методику следует использовать для манипулирования SVG, чтобы..?

Для манипуляций с SVG, вам нужно использовать JavaScript и соответствующий API для SVG. Один из самых популярных и гибких способов достичь желаемого результата - это использование библиотеки D3.js.

Вот как это можно сделать:

1. Включите библиотеку D3.js в свой код.
2. Используйте функцию "select" для выбора элемента SVG, с которым вы хотите работать. Например, если ваш элемент имеет идентификатор "myPath", вы можете выбрать его следующим образом: 

```javascript
var svg = d3.select("#myPath");
```

3. Используйте методы D3.js для изменения свойств выбранного элемента. Например, чтобы сделать path прозрачным и окружение элемента белым, вы можете использовать следующий код:

```javascript
svg.style("stroke", "none"); // делает path прозрачным
svg.style("fill", "white"); // делает окружение элемента белым
```

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

Вот видео-тур по D3.js, который поможет вам разобраться с его основами: https://youtu.be/8jvoTV54nXw

Также вот песочница с примером кода на D3.js, где можно поэкспериментировать: https://observablehq.com/@d3/learn-d3-lets-make-a-bar-chart

можно обойтись без использования SVG, но для создания анимаций потребуется некоторое усилие

    

      GAZENERGY COMPANY
    
body{
  margin: 0;
}
.background {
  height: 100vh;
  background: url(ссылка_на_изображение) no-repeat center / cover;
}
.inner{
  height: 40vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  animation: 5s anim1 infinite;
}
span {
  animation: 5s anim infinite;
  font-family: Tahoma, sans-serif;
  font-weight: bold;
  color: #000;
  font-size: 100px;
  line-height: 66px;
}
@keyframes anim {
  100%{
    color: #FFF;
  }
}
@keyframes anim1 {
  100%{
    background: #000;
    mix-blend-mode: multiply;
  }
}