<svg viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="monospace" fill="black" x="0" y="15">Hello world!</text>
    <rect fill="white" x="0" y="0" width="0" height="20">
      <animate attributeName="x" values="0 ; 96 ; 96 ; 0" dur="3s" repeatCount="indefinite" />
      <animate attributeName="width" values="96; 0; 0; 96" dur="3s" repeatCount="indefinite" />
    </rect>
    <rect fill="black" x="0" y="4" width="1" height="12">
      <animate attributeName="x" values="0 ; 96 ; 96 ; 0" dur="3s" repeatCount="indefinite" />
      <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite" />
    </rect>
  </g>
</svg>

<svg viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="monospace" fill="black" x="0" y="15" clip-path="inset(0 0 0 0) fill-box">Cool, eh?</text>
    <rect fill="white" x="0" y="0" width="0" height="20">
      <animate attributeName="x" calcMode="discrete" values="0; 8; 16; 24; 32; 40; 48; 56; 64; 72; 72; 64; 56; 48; 40; 32; 24; 16; 8; 0" dur="3s" repeatCount="indefinite" />
      <animate attributeName="width" calcMode="discrete" values="72; 64; 56; 48; 40; 32; 24; 16; 8; 0; 0; 8; 16; 24; 32; 40; 48; 56; 64; 72" dur="3s" repeatCount="indefinite" />
    </rect>
    <rect fill="black" x="0" y="4" width="1" height="12">
      <animate attributeName="x" calcMode="discrete" values="0; 8; 16; 24; 32; 40; 48; 56; 64; 72; 72; 64; 56; 48; 40; 32; 24; 16; 8; 0" dur="3s" repeatCount="indefinite" />
      <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite" />
    </rect>
  </g>
</svg>

<!--
<svg viewBox="0 0 300 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="monospace" fill="black" x="0" y="15" clip-path="inset(0 0 0 0) fill-box">Firefox only
      <animate attributeName="clip-path" values="inset(0 100% 0 0) ; inset(0 0 0 0) ; inset(0 0 0 0) ; inset(0 100% 0 0)" keyTimes="0 ; 0.4 ; 0.6 ; 1" dur="3s" repeatCount="indefinite" />
    </text>
    <rect fill="black" x="0" y="4" width="1" height="12">
      <animate attributeName="x" values="0 ; 96 ; 96 ; 0" keyTimes="0 ; 0.4 ; 0.6 ; 1" dur="3s" repeatCount="indefinite" />
      <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite" />
    </rect>
  </g>
</svg>
-->

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.