מעטפה נשלחת

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

סצנת SVG מונפשת · עסקי · שליחה · טופס · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 110" width="100%" role="img"
     aria-label="מעטפה נשלחת">
  <style>
    .es-fly { animation: es-fly 3s cubic-bezier(.5,0,.6,1) infinite }
    .es-line { animation: es-line 3s linear infinite; opacity: 0 }
    .es-l2 { animation-delay: .35s }
    .es-l3 { animation-delay: .7s }
    @keyframes es-fly {
      0% { transform: translate(0,0) scale(1); opacity: 1 }
      70% { transform: translate(96px,-34px) scale(.55); opacity: 1 }
      100% { transform: translate(140px,-50px) scale(.3); opacity: 0 }
    }
    @keyframes es-line { 0% { opacity: 0; transform: translateX(0) } 30% { opacity: .7 } 100% { opacity: 0; transform: translateX(-34px) }
    }
  </style>
  <rect width="180" height="110" fill="#0f172a"/>
  <g stroke="#38bdf8" stroke-width="3" stroke-linecap="round">
    <path class="es-line" d="M46 74h26"/>
    <path class="es-line es-l2" d="M52 84h22"/>
    <path class="es-line es-l3" d="M40 64h20"/>
  </g>
  <g class="es-fly">
    <rect x="26" y="34" width="52" height="34" rx="4" fill="#e2e8f0"/>
    <path d="M26 38l26 18 26-18" fill="none" stroke="#94a3b8" stroke-width="3"/>
  </g>
  <circle cx="150" cy="26" r="14" fill="none" stroke="#334155" stroke-width="3"/>
  <path d="M143 26l5 5 10-11" fill="none" stroke="#34d399" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>