גרף שגדל

העמודות גדלות מהבסיס כלפי מעלה בזכות transform-origin. בלעדיו הן היו גדלות מהמרכז ונראות צפות. גרף שגדל הוא סצנת 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>
    .gc-bar { animation: gc-grow 3.2s ease-in-out infinite; transform-origin: center bottom }
    .gc-b2 { animation-delay: .25s }
    .gc-b3 { animation-delay: .5s }
    .gc-b4 { animation-delay: .75s }
    .gc-arrow { animation: gc-arrow 3.2s ease-in-out infinite }
    @keyframes gc-grow { 0%,100% { transform: scaleY(.25) } 45%,70% { transform: scaleY(1) } }
    @keyframes gc-arrow { 0%,100% { opacity: 0; transform: translate(-8px,8px) } 55%,80% { opacity: 1; transform: translate(0,0) } }
  </style>
  <rect width="160" height="120" fill="#0f172a"/>
  <path d="M24 20v82h116" stroke="#334155" stroke-width="3" fill="none" stroke-linecap="round"/>
  <g>
    <rect class="gc-bar" x="38" y="46" width="16" height="56" rx="3" fill="#38bdf8" style="transform-origin:46px 102px"/>
    <rect class="gc-bar gc-b2" x="64" y="36" width="16" height="66" rx="3" fill="#818cf8" style="transform-origin:72px 102px"/>
    <rect class="gc-bar gc-b3" x="90" y="26" width="16" height="76" rx="3" fill="#c084fc" style="transform-origin:98px 102px"/>
    <rect class="gc-bar gc-b4" x="116" y="16" width="16" height="86" rx="3" fill="#34d399" style="transform-origin:124px 102px"/>
  </g>
  <g class="gc-arrow" stroke="#34d399" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path d="M124 10 138 10 138 24"/>
  </g>
</svg>