WorkspacePacket Watch — network console
Find your next idea/Create
TEMPLATE

Packet Watch — network console

A dark operations console with a live-looking SVG traffic trace, protocol counters and pause/resume controls using simulated data.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
curl: https://curl.se/
A mature open-source project site with dense technical links, releases and downloads.
Chaos Computer Club: https://www.ccc.de/en/
Technical community identity, a compact news archive and persistent topic navigation.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header>
    <b>PACKET/WATCH</b><span><i></i> SIMULATED STREAM</span
    ><button id="change" aria-pressed="false">PAUSE</button>
  </header>
  <section class="readouts">
    <div>
      <small>THROUGHPUT</small><strong id="rate">284.6 <em>Mb/s</em></strong>
    </div>
    <div><small>PACKETS / SEC</small><strong id="packets">12,804</strong></div>
    <div>
      <small>INTERFACE</small><strong>eth0 <em>DEMO</em></strong>
    </div>
  </section>
  <section class="trace">
    <div>
      <h1>Traffic over time</h1>
      <span>LAST 60 SECONDS / SAMPLE DATA</span>
    </div>
    <svg viewBox="0 0 700 170" role="img" aria-label="Simulated network throughput line chart">
      <defs>
        <pattern id="grid" width="35" height="34" patternUnits="userSpaceOnUse">
          <path d="M35 0H0V34" fill="none" stroke="#233337" stroke-width="1" />
        </pattern>
      </defs>
      <rect width="700" height="170" fill="url(#grid)" />
      <path
        id="wave"
        d="M0 140L25 128 50 134 75 80 100 91 125 74 150 109 175 120 200 51 225 59 250 42 275 79 300 89 325 63 350 72 375 33 400 59 425 80 450 68 475 98 500 65 525 49 550 68 575 31 600 52 625 70 650 40 675 56 700 44"
        fill="none"
        stroke="#6dcda4"
        stroke-width="2"
      />
    </svg>
    <div class="axis"><span>−60s</span><span>−30s</span><span>now</span></div>
  </section>
  <section class="streams">
    <h2>ACTIVE PROTOCOLS</h2>
    <div><b>HTTPS</b><i style="--w: 72%; --c: #6dcda4"></i><span>72%</span></div>
    <div><b>DNS</b><i style="--w: 18%; --c: #78afcc"></i><span>18%</span></div>
    <div><b>SSH</b><i style="--w: 10%; --c: #d7bb76"></i><span>10%</span></div>
  </section>
  <output data-status aria-live="polite"></output>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:30 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?