דגל ישראל מתנופף

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

סצנת SVG מונפשת · ישראלי · עצמאות · חג · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 120" width="100%" role="img"
     aria-label="דגל ישראל מתנופף">
  <style>
    /* ההנפשה היא skew ולא שינוי של d, כי אנימציה על d נתמכת רק בכרום */
    .fl-body { animation: fl-skew 3s ease-in-out infinite; transform-origin: 40px 56px }
    @keyframes fl-skew { 0%,100% { transform: skewY(-1.5deg) } 50% { transform: skewY(1.5deg) } }
  </style>
  <rect width="180" height="120" fill="#f8fafc"/>
  <rect x="34" y="14" width="5" height="98" rx="2.5" fill="#94a3b8"/>
  <g class="fl-body">
    <rect x="40" y="20" width="130" height="72" fill="#fff" stroke="#e2e8f0"/>
    <rect x="40" y="26" width="130" height="11" fill="#0038b8"/>
    <rect x="40" y="75" width="130" height="11" fill="#0038b8"/>
    <path d="M105 40 118 62H92z" fill="none" stroke="#0038b8" stroke-width="4"/>
    <path d="M105 72 92 50h26z" fill="none" stroke="#0038b8" stroke-width="4"/>
  </g>
</svg>