| 1 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1260 1260"> |
| 2 |
<style> |
| 3 |
.slide-down { |
| 4 |
animation: slide-down 3s ease-out forwards; |
| 5 |
} |
| 6 |
|
| 7 |
@keyframes slide-down { |
| 8 |
from { |
| 9 |
transform: translateY(-220px); |
| 10 |
} |
| 11 |
to { |
| 12 |
transform: translateY(-20px); |
| 13 |
} |
| 14 |
} |
| 15 |
</style> |
| 16 |
<defs> |
| 17 |
<mask id="reveal"> |
| 18 |
<rect x="0" y="0" width="1260" height="400" rx="80" ry="80" fill="white" /> |
| 19 |
</mask> |
| 20 |
</defs> |
| 21 |
<path d="M0,90 Q0,0 90,0 L1170,0 Q1260,0 1260,90 L1260,900 Q1260,990 1170,990 L360,990 L0,1260 Z" fill="#323A46" /> |
| 22 |
<g mask="url(#reveal)"> |
| 23 |
<g fill="#CD2C24" class="slide-down"> |
| 24 |
<path d="M0,90 Q0,0 90,0 L180,0 L180,290 A90,90 0 1 1 0,290 Z" /> |
| 25 |
<path d="M360,0 H540 V290 A90,90 0 1 1 360,290 Z" /> |
| 26 |
<path d="M720,0 H900 V290 A90,90 0 1 1 720,290 Z" /> |
| 27 |
<path d="M1080,0 H1170 Q1260,0 1260,90 L1260,290 A90,90 0 1 1 1080,290 Z" /> |
| 28 |
</g> |
| 29 |
<g fill="#F5E5C0" class="slide-down"> |
| 30 |
<path d="M180,0 H360 V290 A90,90 0 1 1 180,290 Z" /> |
| 31 |
<path d="M540,0 H720 V290 A90,90 0 1 1 540,290 Z" /> |
| 32 |
<path d="M900,0 H1080 V290 A90,90 0 1 1 900,290 Z" /> |
| 33 |
</g> |
| 34 |
</g> |
| 35 |
<line x1="130" y1="923.5" x2="130" y2="532" fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="55" /> |
| 36 |
<circle cx="260.5" cy="662.5" r="130.5" fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="55" /> |
| 37 |
<circle cx="630" cy="662" r="131" fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="55" /> |
| 38 |
<path d="m1131,565.8c-21.75,-13.05 -65.25,-34.8 -130.5,-34.8q-130.5,0 -130.5,65.25t130.5,65.25t130.5,65.25t-130.5,65.25c-65.25,0 -108.75,-21.75 -130.5,-34.8" fill="#FFF" fill-opacity="0" stroke="#FFF" stroke-linecap="round" stroke-width="55" /> |
| 39 |
</svg> |
| 40 |
|
