מטוס עם באנר

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

סצנת SVG מונפשת · פרסום · מבצע · קיץ · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 100" width="100%" role="img"
     aria-label="מטוס עם באנר">
  <style>
    .pb { animation: pb-fly 7s linear infinite }
    .pb-b { animation: pb-wave 1.2s ease-in-out infinite; transform-origin: right center }
    @keyframes pb-fly { from { transform: translateX(-150px) } to { transform: translateX(260px) } }
    @keyframes pb-wave { 50% { transform: rotate(2.5deg) } }
  </style>
  <rect width="240" height="100" fill="#bae6fd"/>
  <circle cx="40" cy="28" r="16" fill="#fff" opacity=".8"/>
  <circle cx="58" cy="28" r="12" fill="#fff" opacity=".8"/>
  <circle cx="190" cy="62" r="14" fill="#fff" opacity=".7"/>
  <g class="pb">
    <g class="pb-b">
      <rect x="-2" y="34" width="86" height="24" rx="3" fill="#f97316"/>
      <text x="41" y="51" font-family="system-ui" font-size="14" font-weight="700"
            fill="#fff" text-anchor="middle" direction="rtl">מבצע השקה</text>
    </g>
    <path d="M88 46h6l-4-10h5l9 10h10a5 5 0 0 1 0 10h-10l-9 10h-5l4-10h-6z" fill="#1e293b"/>
  </g>
</svg>