TYPED VOID — ANIMATED LOGOMARK
Paste this block wherever the mark should loop. It is inline SVG plus a
<style> tag; no JavaScript, no external file. The static SVGs in svg/
are the ones to use everywhere else.

<style>
  @keyframes tv-a { 0%, 100% { transform: translate(0, 0) }
                    32%      { transform: translate(-2.6px, -2.6px) }
                    70%      { transform: translate(1.1px, 1.1px) } }
  @keyframes tv-b { 0%, 100% { transform: translate(0, 0) }
                    32%      { transform: translate(2.6px, 2.6px) }
                    70%      { transform: translate(-1.1px, -1.1px) } }
  .tv-mark .tv-a { animation: tv-a 3.6s ease-in-out infinite }
  .tv-mark .tv-b { animation: tv-b 3.6s ease-in-out infinite }
  @media (prefers-reduced-motion: reduce) {
    .tv-mark .tv-a, .tv-mark .tv-b { animation: none }
  }
</style>

<svg class="tv-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="Typed Void">
  <defs>
    <clipPath id="tvShell">
      <path d="M 30,0 H 70 A 30,30 0 0 1 100,30 V 70 A 30,30 0 0 1 70,100 H 30 A 30,30 0 0 1 0,70 V 30 A 30,30 0 0 1 30,0 Z"/>
    </clipPath>
  </defs>
  <g clip-path="url(#tvShell)">
    <path class="tv-a" fill="#E8EAF0" d="M -30,-30 L 113,-21 L 56.95,35.05 Q 52,40 45,40 L 43,40 Q 36,40 31.05,44.95 L -20,96 L -30,96 Z"/>
    <path class="tv-b" fill="#7C5CFF" d="M 118,-23 L 130,-23 L 130,130 L -30,130 L -20,99 L 36.69,50.56 Q 42,46 49,46 L 51,46 Q 58,46 62.59,40.72 Z"/>
  </g>
</svg>

NOTES
- Set the size with width/height or CSS on the <svg>; everything scales.
- On light backgrounds change fill #E8EAF0 to #0B0C10.
- Give the clipPath a unique id if more than one mark is on the page.
- The two halves must never touch. If you retime the loop, keep the
  inward travel at or below 1.1 units.