מגן סורק

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

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 130" width="100%" role="img"
     aria-label="מגן סורק">
  <style>
    .sh-scan { animation: sh-scan 2.6s ease-in-out infinite }
    .sh-check { animation: sh-check 2.6s ease-in-out infinite }
    @keyframes sh-scan { 0%,100% { transform: translateY(0) } 50% { transform: translateY(92px) } }
    @keyframes sh-check { 0%,40% { opacity: 0 } 60%,100% { opacity: 1 } }
  </style>
  <defs>
    <clipPath id="sh-clip">
      <path d="M60 12l38 14v34c0 26-16 44-38 56-22-12-38-30-38-56V26z"/>
    </clipPath>
  </defs>
  <rect width="120" height="130" fill="#0f172a"/>
  <path d="M60 12l38 14v34c0 26-16 44-38 56-22-12-38-30-38-56V26z" fill="#1e293b" stroke="#38bdf8" stroke-width="3"/>
  <g clip-path="url(#sh-clip)">
    <rect class="sh-scan" x="18" y="14" width="84" height="5" fill="#38bdf8" opacity=".75"/>
  </g>
  <path class="sh-check" d="M44 64l11 11 22-24" fill="none" stroke="#34d399" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>