title: How to animate a mask svg from js?
body: <p>How to animate using js mask, and masked the layer and layer mask svg? Without using third-party libraries?  </p>
  
  <pre><code>&lt;svg id="mask-layer" width="200" height="50"  &gt;
      &lt;defs&gt;
          &lt;mask id="mask"&gt;
              &lt;rect width="200" height="50" style="fill: red" /&gt;
          &lt;/mask&gt;
      &lt;/defs&gt;
      &lt;rect id="masked" width="200" height="50" style="fill: red"/&gt;
  &lt;/svg&gt;  
  </code></pre>
  
  <p>Need to make a moving mask.  </p>
  
  <p><a href="https://i.stack.imgur.com/H1qeu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H1qeu.png" alt="enter image description here"></a>  </p>
  
  <p>Was looking for an answer all day and is desperate. I will be glad to any advice on the topic.</p>