רקטה ממריאה

רקטה ממריאה הוא סצנת SVG מונפשת מתוך סצנות מונפשות של כליקס. מה שמורידים הוא קובץ SVG שההנפשה שלו כתובה בתוכו, ולכן הוא עובד גם כתגית img. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

סצנת SVG מונפשת · השקה · צמיחה · סטארטאפ · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 160" width="100%" role="img"
     aria-label="רקטה ממריאה">
  <style>
    .rk { animation: rk-up 2.6s ease-in-out infinite }
    .rk-fire { animation: rk-f .18s steps(2) infinite; transform-origin: 60px 118px }
    .rk-star { animation: rk-s 1.6s linear infinite }
    @keyframes rk-up { 0%,100% { transform: translateY(6px) } 50% { transform: translateY(-10px) } }
    @keyframes rk-f { 50% { transform: scaleY(.72) scaleX(1.15) } }
    @keyframes rk-s { to { transform: translateY(60px); opacity: 0 } }
  </style>
  <rect width="120" height="160" fill="#0b1220"/>
  <g class="rk-star" opacity=".8">
    <circle cx="24" cy="20" r="1.6" fill="#fff"/><circle cx="96" cy="34" r="1.4" fill="#fff"/>
    <circle cx="40" cy="52" r="1.2" fill="#fff"/><circle cx="86" cy="70" r="1.6" fill="#fff"/>
  </g>
  <g class="rk">
    <path d="M60 22c11 10 17 26 17 44v22H43V66c0-18 6-34 17-44z" fill="#e2e8f0"/>
    <path d="M43 74 30 96l13-6z" fill="#ef4444"/>
    <path d="M77 74 90 96l-13-6z" fill="#ef4444"/>
    <circle cx="60" cy="58" r="8" fill="#38bdf8" stroke="#0ea5e9" stroke-width="2"/>
    <path d="M43 88h34v10H43z" fill="#cbd5e1"/>
    <g class="rk-fire">
      <path d="M52 98h16l-3 12-5 10-5-10z" fill="#fb923c"/>
      <path d="M56 98h8l-2 9-2 7-2-7z" fill="#fde047"/>
    </g>
  </g>
</svg>