パーツ番号 05-07-10 ・ CSSのみ

リアルタイム風データストリームグラフ

右から新しいデータ点が流れ込み続ける折れ線をループ表示。監視ダッシュボードの演出に。

autocss

プレビュー

ソースコード

HTML

<div class="d05-07-10 io-reveal">
          <div class="d05-07-10-window">
            <svg viewBox="0 0 400 120" preserveAspectRatio="none" class="d05-07-10-svg">
              <path d="M0,70 L20,55 L40,68 L60,45 L80,60 L100,38 L120,52 L140,42 L160,58 L180,48 L200,62 L220,55 L240,68 L260,45 L280,60 L300,38 L320,52 L340,42 L360,58 L380,48 L400,62" class="d05-07-10-path"/>
            </svg>
          </div>
          <div class="d05-07-10-live"><span class="d05-07-10-dot"></span>ライブ更新中</div>
        </div>

CSS

.d05-07-10{width:100%}
        .d05-07-10-window{width:100%;height:120px;overflow:hidden;position:relative;border-radius:6px;background:linear-gradient(180deg,#f8fafc,#fff)}
        .d05-07-10-svg{position:absolute;top:0;left:0;height:100%;width:200%}
        .d05-07-10.is-in .d05-07-10-svg{animation:d05-07-10-scroll 4s linear infinite}
        @keyframes d05-07-10-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
        .d05-07-10-path{fill:none;stroke:#3b82f6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
        .d05-07-10-live{display:flex;align-items:center;gap:6px;font-size:11px;color:#6b7280;margin-top:8px}
        .d05-07-10-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:d05-07-10-blink 1.2s ease-in-out infinite}
        @keyframes d05-07-10-blink{0%,100%{opacity:1}50%{opacity:.3}}

クラス名 .d05-07-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。