חופה

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

סצנת SVG מונפשת · חתונה · אירועים · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 130" width="100%" role="img"
     aria-label="חופה">
  <style>
    .wa-heart { animation: wa-up 4s ease-in-out infinite; opacity: 0 }
    .wa-h2 { animation-delay: 1.3s }
    .wa-h3 { animation-delay: 2.6s }
    .wa-cloth { animation: wa-cloth 5s ease-in-out infinite }
    @keyframes wa-up { 0% { opacity: 0; transform: translateY(0) scale(.7) } 30% { opacity: .9 } 100% { opacity: 0; transform: translateY(-46px) scale(1.1) } }
    @keyframes wa-cloth { 0%,100% { transform: translateY(0) } 50% { transform: translateY(3px) } }
  </style>
  <rect width="180" height="130" fill="#1e1b4b"/>
  <rect x="34" y="30" width="8" height="86" rx="3" fill="#a16207"/>
  <rect x="138" y="30" width="8" height="86" rx="3" fill="#a16207"/>
  <path class="wa-cloth" d="M34 32h112c-4 16-24 24-56 24S38 48 34 32z" fill="#f5d0fe" opacity=".8"/>
  <g fill="#fb7185">
    <path class="wa-heart" d="M90 96c-8-6-14-11-14-17a7 7 0 0 1 14-4 7 7 0 0 1 14 4c0 6-6 11-14 17z"/>
    <path class="wa-heart wa-h2" d="M66 100c-6-5-11-9-11-13a5.6 5.6 0 0 1 11-3 5.6 5.6 0 0 1 11 3c0 4-5 8-11 13z"/>
    <path class="wa-heart wa-h3" d="M116 100c-6-5-11-9-11-13a5.6 5.6 0 0 1 11-3 5.6 5.6 0 0 1 11 3c0 4-5 8-11 13z"/>
  </g>
  <g fill="#fbcfe8">
    <circle cx="38" cy="46" r="6"/><circle cx="46" cy="58" r="5"/>
    <circle cx="142" cy="46" r="6"/><circle cx="134" cy="58" r="5"/>
  </g>
  <rect x="20" y="114" width="140" height="7" rx="3.5" fill="#312e81"/>
</svg>