Применяйте линейно-градиентную анимацию только к наложению сетки / сетки

Question

Я ломаю голову за идею, которая у меня есть, и, возможно, я неправильно ее использую и могу использовать некоторые другие входные данные / идеи.

Идея состоит в том, чтобы применить анимированный градиент, примененный к сетке /Только линии сетки.

Вот кодекс того, что у меня сейчас: https://codepen.io/monsmado/pen/ewRgOR

html {
  overflow: hidden;
  font-weight: 100;
}

#pattern {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 1) 0px, transparent 1px), 
    linear-gradient(90deg, rgba(255, 255, 255, 1) 0px, transparent 1px);
  background-size: 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  height: 100%;
  width: 100%;
  position: absolute;
  margin: -8px;
}

body {
  background: linear-gradient(270deg, #246655, #662464);
  background-size: 400% 400%;
  animation: AnimationName 5s ease infinite;
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<div id="pattern"></div>

Я не могу думать о том, как применить этот анимированный градиент только к сетке.Возможно с маской слоя CSS или что-то.Я нашел некоторые другие решения, которые работают с некоторыми java-скриптами и canvas, но я еще не очень знаком с canvas.

Вот пример примера изображения того, как он должен выглядеть: https://imgur.com/a/vAIHG1d Градиент применяется только к линиям / сетке, и фон может быть любым.Линейный градиент должен стать анимированным.

Любая помощь или мысль о том, как подойти к этому, была бы очень хороша.

Answer 1

Вы можете рассмотреть mask-image, чтобы сделать это. Вам нужно будет создать два слоя, где маска будет repeating-linear-gradient, в которой будут видны только линии. Первый слой для горизонтальных и второй для вертикальных:

body {
  margin: 0;
  height: 100vh;
  background: url(https://picsum.photos/id/1019/1000/800) center/cover;
}

body:before,
body:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to left, purple, green, orange);
  background-size: 400% 100%;
  animation: AnimationName 2s ease infinite alternate;
}
body:before {  
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 19px, #fff 19px 20px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 19px, #fff 19px 20px);
}
body:after {  
  -webkit-mask-image: repeating-linear-gradient(to right, transparent 0 19px, #fff 19px 20px);
  mask-image: repeating-linear-gradient(to right, transparent 0 19px, #fff 19px 20px);
}

@keyframes AnimationName {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}