עץ חג מולד

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

סצנת SVG מונפשת · חג · דצמבר · חורף · SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 150" width="100%" role="img"
     aria-label="עץ חג מולד">
  <style>
    .xt-l { animation: xt-blink 1.6s ease-in-out infinite }
    .xt-l:nth-of-type(2n) { animation-delay: .4s }
    .xt-l:nth-of-type(3n) { animation-delay: .8s }
    .xt-star { animation: xt-star 2.4s ease-in-out infinite; transform-origin: 60px 18px }
    .xt-snow { animation: xt-fall 4s linear infinite }
    @keyframes xt-blink { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
    @keyframes xt-star { 50% { transform: scale(1.18) rotate(12deg) } }
    @keyframes xt-fall { to { transform: translateY(150px) } }
  </style>
  <rect width="120" height="150" fill="#0b1220"/>
  <g class="xt-snow" opacity=".7">
    <circle cx="18" cy="-8" r="2" fill="#fff"/><circle cx="52" cy="-30" r="1.6" fill="#fff"/>
    <circle cx="88" cy="-14" r="2.2" fill="#fff"/><circle cx="104" cy="-44" r="1.5" fill="#fff"/>
    <circle cx="34" cy="-56" r="1.8" fill="#fff"/>
  </g>
  <rect x="52" y="122" width="16" height="16" rx="2" fill="#78350f"/>
  <path d="M60 26 34 70h52z" fill="#15803d"/>
  <path d="M60 52 26 100h68z" fill="#166534"/>
  <path d="M60 78 18 128h84z" fill="#14532d"/>
  <circle class="xt-l" cx="52" cy="62" r="3.4" fill="#f87171"/>
  <circle class="xt-l" cx="70" cy="66" r="3.4" fill="#fbbf24"/>
  <circle class="xt-l" cx="42" cy="92" r="3.4" fill="#60a5fa"/>
  <circle class="xt-l" cx="60" cy="88" r="3.4" fill="#f472b6"/>
  <circle class="xt-l" cx="78" cy="96" r="3.4" fill="#a3e635"/>
  <circle class="xt-l" cx="34" cy="118" r="3.4" fill="#fbbf24"/>
  <circle class="xt-l" cx="60" cy="114" r="3.4" fill="#f87171"/>
  <circle class="xt-l" cx="86" cy="120" r="3.4" fill="#60a5fa"/>
  <path class="xt-star" d="m60 8 4 10 10 1-7.5 7 2 10-8.5-5-8.5 5 2-10-7.5-7 10-1z" fill="#fcd34d"/>
</svg>