frieren / assets / frieren.svg
<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>