51 lines
1.5 KiB
Svelte
51 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
type Props = { size?: number; flameAnimated?: boolean };
|
|
let { size = 120, flameAnimated = true }: Props = $props();
|
|
</script>
|
|
|
|
<svg width={size} height={size} viewBox="0 0 100 140" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<!-- Flamme: 2 Pfade, größer + kleiner, sanft pulsierend -->
|
|
<g class="flame" class:flame-animated={flameAnimated}>
|
|
<path
|
|
class="flame-outer"
|
|
d="M35 110 Q50 145 65 110 Q60 125 50 132 Q40 125 35 110 Z"
|
|
fill="var(--c-flame-outer)"
|
|
/>
|
|
<path
|
|
class="flame-inner"
|
|
d="M42 110 Q50 130 58 110 Q55 120 50 124 Q45 120 42 110 Z"
|
|
fill="var(--c-flame-inner)"
|
|
/>
|
|
</g>
|
|
|
|
<!-- Finnen -->
|
|
<path d="M22 92 L36 75 L36 105 Z" fill="var(--c-rocket-fin)" />
|
|
<path d="M78 92 L64 75 L64 105 Z" fill="var(--c-rocket-fin)" />
|
|
|
|
<!-- Rumpf -->
|
|
<path
|
|
d="M50 8 Q72 30 72 70 L72 105 Q60 110 50 110 Q40 110 28 105 L28 70 Q28 30 50 8 Z"
|
|
fill="var(--c-rocket-body)"
|
|
stroke="#a83a3a"
|
|
stroke-width="2"
|
|
/>
|
|
|
|
<!-- Fenster -->
|
|
<circle cx="50" cy="50" r="11" fill="var(--c-rocket-window)" stroke="#c2a230" stroke-width="2" />
|
|
<circle cx="46" cy="46" r="3" fill="#fff" opacity="0.7" />
|
|
|
|
<!-- Bandage am Rumpf -->
|
|
<rect x="28" y="78" width="44" height="6" fill="#c2a230" rx="2" />
|
|
</svg>
|
|
|
|
<style>
|
|
.flame-animated {
|
|
transform-origin: 50px 110px;
|
|
animation: flicker 0.32s steps(2) infinite;
|
|
}
|
|
@keyframes flicker {
|
|
0%, 100% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.78); }
|
|
}
|
|
</style>
|