מיקרופון והקלטה

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

סצנת SVG מונפשת · תוכן · אודיו · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120" width="100%" role="img"
     aria-label="מיקרופון והקלטה">
  <style>
    .pd-bar { animation: pd-bar 1.1s ease-in-out infinite; transform-origin: center }
    .pd-b2 { animation-delay: .15s }
    .pd-b3 { animation-delay: .3s }
    .pd-b4 { animation-delay: .45s }
    .pd-rec { animation: pd-rec 1.6s ease-in-out infinite }
    @keyframes pd-bar { 0%,100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }
    @keyframes pd-rec { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
  </style>
  <rect width="160" height="120" fill="#0f172a"/>
  <rect x="66" y="18" width="28" height="48" rx="14" fill="#818cf8"/>
  <path d="M56 54a24 24 0 0 0 48 0" fill="none" stroke="#c7d2fe" stroke-width="4" stroke-linecap="round"/>
  <path d="M80 78v14" stroke="#c7d2fe" stroke-width="4" stroke-linecap="round"/>
  <rect x="62" y="92" width="36" height="6" rx="3" fill="#475569"/>
  <g fill="#34d399">
    <rect class="pd-bar" x="20" y="42" width="6" height="30" rx="3" style="transform-origin:23px 57px"/>
    <rect class="pd-bar pd-b2" x="32" y="42" width="6" height="30" rx="3" style="transform-origin:35px 57px"/>
    <rect class="pd-bar pd-b3" x="122" y="42" width="6" height="30" rx="3" style="transform-origin:125px 57px"/>
    <rect class="pd-bar pd-b4" x="134" y="42" width="6" height="30" rx="3" style="transform-origin:137px 57px"/>
  </g>
  <circle class="pd-rec" cx="140" cy="20" r="6" fill="#f43f5e"/>
</svg>