title: How to make an SVG text glitch effect affect an SVG path instead
body: <p>I'm using an SVG effect to produce a glitch effect on a bit of text, but I want it to effect the logo instead. The logo is also SVG, using a path.</p>
  
  <p><a href="http://www.royalarcademusic.co.uk/" rel="nofollow">Here is the website showing the effect, as you can see the text is glitched rather than the diamond.</a></p>
  
  <p>Here is the code:</p>
  
  <p>The Text:</p>
  
  <pre><code>                &lt;svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="800px" height="110px" viewBox="0 0 800 110" style="margin-left: 116px;"&gt;
  &lt;style type="text/css"&gt;
  
  &lt;![CDATA[
  
      text {
          filter: url(#filter);
          fill: white;
          font-size: 100px;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
              }
  ]]&gt;
  &lt;/style&gt;
      &lt;defs&gt;
  
          &lt;filter id="filter"&gt;
              &lt;feFlood flood-color="black" result="black" /&gt;
              &lt;feFlood flood-color="red" result="flood1" /&gt;
              &lt;feFlood flood-color="limegreen" result="flood2" /&gt;
              &lt;feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/&gt;
              &lt;feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/&gt;
              &lt;feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/&gt;
              &lt;feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/&gt;
              &lt;feComposite in="flood1" in2="off1a" operator="in"  result="comp1" /&gt;
              &lt;feComposite in="flood2" in2="off2a" operator="in" result="comp2" /&gt;
  
              &lt;feMerge x="0" width="100%" result="merge1"&gt;
                  &lt;feMergeNode in = "black" /&gt;
                  &lt;feMergeNode in = "comp1" /&gt;
                  &lt;feMergeNode in = "off1b" /&gt;
  
                  &lt;animate 
                      attributeName="y" 
                      id = "y"
                      dur ="4s"
  
                      values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'
  
                      keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
  
                      repeatCount = "indefinite" /&gt;
  
                  &lt;animate attributeName="height" 
                      id = "h" 
                      dur ="4s"
  
                      values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'
  
                      keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
  
                      repeatCount = "indefinite" /&gt;
              &lt;/feMerge&gt;
  
  
              &lt;feMerge x="0" width="100%" y="60px" height="65px" result="merge2"&gt;
                  &lt;feMergeNode in = "black" /&gt;
                  &lt;feMergeNode in = "comp2" /&gt;
                  &lt;feMergeNode in = "off2b" /&gt;
  
                  &lt;animate attributeName="y" 
                      id = "y"
                      dur ="4s"
                      values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;' 
  
                      keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'
  
                      repeatCount = "indefinite" /&gt;
  
                  &lt;animate attributeName="height" 
                      id = "h"
                      dur = "4s"
  
                      values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'
  
                      keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513;  1'
  
                      repeatCount = "indefinite" /&gt;
              &lt;/feMerge&gt;
  
              &lt;feMerge&gt;
                  &lt;feMergeNode in="SourceGraphic" /&gt;  
  
                  &lt;feMergeNode in="merge1" /&gt; 
              &lt;feMergeNode in="merge2" /&gt;
  
              &lt;/feMerge&gt;
          &lt;/filter&gt;
  
      &lt;/defs&gt;
  
  &lt;g&gt;
      &lt;text x="0" y="100"&gt;ROYAL ARCADE&lt;/text&gt;
  
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The Diamond:</p>
  
  <pre><code>    &lt;div style="margin-top: -30px;"&gt;
                      &lt;div class="glitch"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="200px" height="300px" viewBox="0 0 1136.943 907.455" enable-background="new 0 0 1136.943 907.455"
       xml:space="preserve"&gt;
       &lt;defs&gt;
       &lt;linearGradient id="rgrad__uniqueID_756c7399" x1="100%" y1="0%" x2="46%" y2="100%" gradientUnits="objectBoundingBox"&gt;
     &lt;stop offset="0%" style="stop-color:rgb(0, 255, 244); stop-opacity:1"&gt;&lt;/stop&gt;
     &lt;stop offset="46%" style="stop-color:rgb(0, 74, 255); stop-opacity:1"&gt;&lt;/stop&gt;
     &lt;stop offset="98%" style="stop-color:rgb(127, 46, 208); stop-opacity:1"&gt;&lt;/stop&gt;
  &lt;/linearGradient&gt;
       &lt;/defs&gt;
  &lt;path fill-rule="evenodd" clip-rule="evenodd" fill="url(#rgrad__uniqueID_756c7399)" d="M970.566,15.158H166.187L8.808,259.969v8.744l555.197,629.514
      h8.743l555.196-625.142v-13.116L970.566,15.158z M887.504,58.875l-87.433,139.892L642.694,58.875H887.504z M765.099,238.112H371.652
      L568.376,54.503L765.099,238.112z M494.059,58.875l-153.007,135.52l-87.433-135.52H494.059z M192.417,58.875l113.662,179.237H78.754
      L192.417,58.875z M78.754,281.828h236.068L515.917,771.45L78.754,281.828z M568.376,771.45L367.281,281.828h402.19L568.376,771.45z
       M620.835,771.45L821.93,281.828h236.068L620.835,771.45z M830.673,238.112L944.336,58.875l113.662,179.237H830.673z"/&gt;
  &lt;/svg&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>So to summarise, how do I make the glitch effect work on the Diamond SVG rather than the text?</p>
  
  <p>Thanks in advance</p>