טלפון מצלצל

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

סצנת SVG מונפשת · עסקי · שירות · ליד · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 120" width="100%" role="img"
     aria-label="טלפון מצלצל">
  <style>
    .pr-body { animation: pr-shake .9s ease-in-out infinite; transform-origin: center }
    .pr-wave { animation: pr-wave 1.8s ease-out infinite; opacity: 0 }
    .pr-w2 { animation-delay: .6s }
    .pr-w3 { animation-delay: 1.2s }
    @keyframes pr-shake { 0%,100% { transform: rotate(0) } 20% { transform: rotate(-7deg) } 40% { transform: rotate(7deg) } 60% { transform: rotate(-4deg) } 80% { transform: rotate(4deg) } }
    @keyframes pr-wave { 0% { opacity: .8; transform: scale(.6) } 100% { opacity: 0; transform: scale(1.5) } }
  </style>
  <rect width="140" height="120" fill="#0f172a"/>
  <g fill="none" stroke="#38bdf8" stroke-width="3" style="transform-origin:70px 60px">
    <circle class="pr-wave" cx="70" cy="60" r="30"/>
    <circle class="pr-wave pr-w2" cx="70" cy="60" r="30"/>
    <circle class="pr-wave pr-w3" cx="70" cy="60" r="30"/>
  </g>
  <g class="pr-body" style="transform-origin:70px 60px">
    <rect x="54" y="26" width="32" height="68" rx="7" fill="#1e293b" stroke="#475569" stroke-width="2"/>
    <rect x="58" y="34" width="24" height="48" rx="2" fill="#0ea5e9" opacity=".25"/>
    <circle cx="70" cy="88" r="3" fill="#64748b"/>
    <path d="M64 44c2 6 6 10 12 12l3-4 5 5-4 5c-9-2-17-10-19-19l5-4 5 5z" fill="#38bdf8"/>
  </g>
</svg>