Эффект полос старого телевизора на SVG?

#css3 #svg #анимация #эффекты

Подскажите, как можно реализовать эффект ряби старого телевизора на SVG? 



.bl_svg {
  width: 60vh;
  margin: 0 auto;
}

.st1 {
  fill: #0e1518
}

.st3 {
  fill: #fff
}

.st4 {
  fill: #f27d21;
  stroke: #0e1518;
  stroke-miterlimit: 10
}

.st5 {
  fill: #b44d26
}

  





Собственно мне как-то надо сделать чтобы текст 404 рябил, или шёл полосами. 
    

Ответы

Ответ 1

Шум можно добавить при помощи примитива FeTurbulence и анимировать его. По идее шум
нужно добавлять ко всему экрану, поэтому слой с надписью нужно поместить в коде перед
экраном, чтобы он не был поверх эффекта.



.bl_svg {
  width: 60vh;
  margin: 0 auto;
}

.st1 {
  fill: #0e1518
}

.st3 {
  fill: gray;
}

.st4 {
  fill: #f27d21;
  stroke: #0e1518;
  stroke-miterlimit: 10
}

.st5 {
  fill: #b44d26
}