Matrix animation

matrix.svg

<svg width="100%" height="100%" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    text {
      font-family: 'Courier New', monospace;
      fill: lime;
      font-size: 15px;
    }
  </style>

  <rect width="100%" height="100%" fill="black" />

  <text x="10" y="-20">
    <tspan>き</tspan>
    <animate attributeName="y" from="-20" to="220" dur="2s" repeatCount="indefinite"/>
  </text>
  <text x="10" y="-30">
    <tspan>き</tspan>
    <animate attributeName="y" from="-30" to="210" dur="2s" repeatCount="indefinite"/>
  </text>
  <text x="10" y="-40">
    <tspan>き</tspan>
    <animate attributeName="y" from="-40" to="200" dur="2s" repeatCount="indefinite"/>
  </text>
  <text x="10" y="-50">
    <tspan>き</tspan>
    <animate attributeName="y" from="-50" to="190" dur="2s" repeatCount="indefinite"/>
  </text>


  <text x="30" y="-40">
    <tspan>ゑ</tspan>
    <animate attributeName="y" from="-40" to="220" dur="3s" repeatCount="indefinite"/>
  </text>
  <text x="50" y="-60">
    <tspan>ざ</tspan>
    <animate attributeName="y" from="-60" to="220" dur="2.5s" repeatCount="indefinite"/>
  </text>
  <!-- Add more text elements as needed, each with its own position and animation -->

</svg>