frieren

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 440" role="img" aria-label="frieren">
  <style>
    @media (prefers-reduced-motion: no-preference) {
      .tw { animation: tw 3.6s ease-in-out infinite }
      .t1 { animation-delay: -0.6s }
      .t2 { animation-delay: -1.2s }
      .t3 { animation-delay: -1.8s }
      .t4 { animation-delay: -2.4s }
      .t5 { animation-delay: -3.0s }
      .glow { animation: tw 2.4s ease-in-out infinite }
      @keyframes tw {
        0%, 100% { opacity: 1 }
        50% { opacity: 0.3 }
      }
    }
  </style>
  <rect width="660" height="440" fill="#0C0C0F"/>

  <!-- constellation edges: a git graph drawn in the night sky -->
  <g stroke="#2E3644" stroke-width="2">
    <line x1="305" y1="165" x2="385" y2="145"/>
    <line x1="385" y1="145" x2="465" y2="125"/>
    <line x1="465" y1="125" x2="545" y2="105"/>
    <line x1="385" y1="145" x2="445" y2="195"/>
    <line x1="445" y1="195" x2="525" y2="175"/>
    <line x1="525" y1="175" x2="545" y2="105"/>
  </g>

  <g shape-rendering="crispEdges">
    <!-- commit stars: mainline in gold, a branch in frost, merging back -->
    <rect x="300" y="160" width="10" height="10" fill="#E8C170"/>
    <rect x="380" y="140" width="10" height="10" fill="#E8C170"/>
    <rect x="460" y="120" width="10" height="10" fill="#E8C170"/>
    <rect x="540" y="100" width="10" height="10" fill="#E8C170"/>
    <rect x="440" y="190" width="10" height="10" fill="#5EEAD4"/>
    <rect x="520" y="170" width="10" height="10" fill="#5EEAD4"/>

    <!-- faint field stars -->
    <rect class="tw"    x="230" y="40"  width="4" height="4" fill="#39404E"/>
    <rect class="tw t1" x="280" y="90"  width="4" height="4" fill="#39404E"/>
    <rect class="tw t2" x="350" y="60"  width="4" height="4" fill="#39404E"/>
    <rect class="tw t3" x="420" y="40"  width="4" height="4" fill="#39404E"/>
    <rect class="tw t4" x="500" y="50"  width="4" height="4" fill="#39404E"/>
    <rect class="tw t5" x="580" y="60"  width="4" height="4" fill="#39404E"/>
    <rect class="tw t2" x="610" y="140" width="4" height="4" fill="#39404E"/>
    <rect class="tw t4" x="260" y="140" width="4" height="4" fill="#39404E"/>
    <rect class="tw t1" x="60"  y="70"  width="4" height="4" fill="#39404E"/>
    <rect class="tw t3" x="120" y="130" width="4" height="4" fill="#39404E"/>

    <!-- ground -->
    <rect x="0" y="380" width="660" height="60" fill="#13161C"/>
    <rect x="60"  y="370" width="10" height="10" fill="#1C2F2B"/>
    <rect x="120" y="370" width="10" height="10" fill="#1C2F2B"/>
    <rect x="190" y="370" width="10" height="10" fill="#1C2F2B"/>
    <rect x="470" y="370" width="10" height="10" fill="#1C2F2B"/>
    <rect x="560" y="370" width="10" height="10" fill="#1C2F2B"/>

    <!-- the mage, watching the history hold -->
    <!-- hair -->
    <rect x="120" y="250" width="30" height="10" fill="#E6E9F2"/>
    <rect x="110" y="260" width="50" height="10" fill="#E6E9F2"/>
    <rect x="100" y="270" width="70" height="10" fill="#E6E9F2"/>
    <rect x="100" y="280" width="20" height="10" fill="#E6E9F2"/>
    <rect x="150" y="280" width="20" height="10" fill="#E6E9F2"/>
    <rect x="100" y="290" width="20" height="10" fill="#E6E9F2"/>
    <rect x="150" y="290" width="20" height="10" fill="#E6E9F2"/>
    <rect x="100" y="300" width="10" height="50" fill="#E6E9F2"/>
    <rect x="160" y="300" width="10" height="50" fill="#E6E9F2"/>
    <!-- face -->
    <rect x="120" y="280" width="10" height="10" fill="#3E8E7E"/>
    <rect x="130" y="280" width="10" height="10" fill="#F2D8C2"/>
    <rect x="140" y="280" width="10" height="10" fill="#3E8E7E"/>
    <rect x="120" y="290" width="30" height="10" fill="#F2D8C2"/>
    <!-- cloak -->
    <rect x="110" y="300" width="50" height="30" fill="#2E4A5C"/>
    <rect x="110" y="330" width="10" height="10" fill="#2E4A5C"/>
    <rect x="120" y="330" width="30" height="10" fill="#E8C170"/>
    <rect x="150" y="330" width="10" height="10" fill="#2E4A5C"/>
    <rect x="110" y="340" width="50" height="20" fill="#2E4A5C"/>
    <!-- boots -->
    <rect x="110" y="360" width="20" height="20" fill="#191D26"/>
    <rect x="140" y="360" width="20" height="20" fill="#191D26"/>
    <!-- staff -->
    <rect x="180" y="240" width="10" height="140" fill="#6B4A35"/>
    <rect class="glow" x="180" y="220" width="10" height="20" fill="#E8C170"/>
  </g>
</svg>