The barcode, rebuilt in CSS.

Hover it. It scans, and tells you what it really is.

A beam runs the length of the code, bottom to top, the same direction the number reads. Everything behind it is decoded. 728473784337 and PATHPEPTIDES are both twelve characters, so the decoded run lands in exactly the same box — nothing shifts, nothing reflows. Move away and it re-encodes.

Nine frames across one sweep: parked, the beam entering from below, six stages of decode, and the resolved state. The sweep is linear — a scanner travels at constant speed, and both ends of the travel sit off the box, so there is no start or stop to see. The return is faster and eased, 520 ms against 1,000, so dismissing it feels like a snap-back rather than a rewind.

Same size, side by side.

Your PNG on the left, the CSS on the right, both the full 252 × 486 artwork — quiet zones included. The third is the two overlaid: red is source-only, green is CSS-only, yellow is agreement.

728473784337 PATHPEPTIDES

The bar field differs by 25 pixels out of 87,000 — the geometry was measured off your PNG row by row rather than eyeballed. The digit run reads bottom to top, glyph tops facing left, which is the direction in your original; the strip lands on exactly the right box, x 184–221, twelve characters over 328 px. What is left over is letterform only: yours is a condensed face I do not have. I fitted five candidates against it — PP Mori at two weights, Helvetica Condensed, Avenir Next Condensed and Impact — solving cap height and tracking for each so the comparison was fair, and every one landed within two points of Geist Mono. Swapping the face is one line if you have the real one.

Any size, still sharp.

One declaration each — width:85px through width:400px. The bars, the gaps, the number, the quiet zones and the scan all scale together because nothing is fixed in pixels.

Colour, number and payload are variables.

The digits are real selectable text, so any code works — swap the string and the run re-fits itself. The decoded string is just the second layer, so the easter egg can say anything twelve characters long. Colour is three custom properties.

On a light ground set --bar-blend:multiply — screen is right for a dark one and would wash a cream card out.

Copy this.

Two files' worth, around 2.6 KB before compression, and still no JavaScript. The scan is a transition on a registered custom property; the decode is two masked text layers reading that same property.

/* ── PATH barcode ────────────────────────────────────────────────────
   Pure CSS. No images, no SVG, no JS.
   Size it by setting a width (or height) on .barcode — everything
   inside is a percentage, so it scales to any box.
   Recolour with --bar-ink / --bar-bg / --bar-beam.

   The box is the full 252×486 artwork including its quiet zones, so
   nothing sits flush to an edge and nothing gets clipped.

   Hover (or focus) runs a scanner beam along the code and decodes the
   number behind it. Two text layers share one masked boundary, so they
   can never drift apart.                                              */

@property --s{syntax:'<percentage>';initial-value:-45%;inherits:true}

.barcode{
  --bar-ink:#fff;
  --bar-bg:#000;
  --bar-beam:#4fb3ff;
  --bar-blend:screen;      /* use multiply on a light --bar-bg         */
  --bar-size:20.319cqw;    /* digit cap-height, tuned to the source    */
  --bar-track:-0.06143em;  /* condenses the run to the measured strip  */
  --bar-lift:0.794cqw;     /* ink sits high in the em box; push it down*/
  --s:-45%;                /* scan position; parked off-box both ends  */
  position:relative;
  container-type:size;
  aspect-ratio:252/486;
  background:var(--bar-bg);
  overflow:hidden;
  transition:--s 520ms cubic-bezier(.4,0,.2,1);   /* re-encode, faster */
}
.barcode:has(b.dec):hover,
.barcode:has(b.dec):focus-visible{
  --s:140%;
  /* linear: a scanner travels at constant speed, and both ends of the
     sweep sit off-box, so there is no abrupt start or stop to see    */
  transition:--s 1000ms linear;
}

.barcode i{
  position:absolute;
  background:var(--bar-ink);
  top:calc(var(--t)*1%); height:calc(var(--h)*1%);
  left:calc(var(--l)*1%); width:calc(var(--w)*1%);
}

.barcode b{
  position:absolute; right:8.730%; top:13.786%; height:67.490%;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl;              /* +180° below = glyphs 90°ccw, */
  rotate:0deg;                           /* reading bottom-to-top        */
  transform:translateY(var(--bar-lift)) rotate(180deg);
  font:400 var(--bar-size)/1 'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  letter-spacing:var(--bar-track);
  color:var(--bar-ink);
  font-variant-numeric:tabular-nums;
  user-select:all;
}
/* the wipe. Local top = page bottom after the 180° turn, so the reveal
   runs bottom-to-top, the same direction the code reads.              */
.barcode b.enc{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--s) - 1.5%),#000 var(--s));
          mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--s) - 1.5%),#000 var(--s));
}
.barcode b.dec{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--s) - 1.5%),transparent var(--s));
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--s) - 1.5%),transparent var(--s));
  text-shadow:0 0 9px color-mix(in srgb,var(--bar-beam) 45%,transparent);
}

/* the beam. Both halves read the same --s, so the light and the wipe
   boundary are the same line by construction.                         */
.barcode u{position:absolute;inset:0;z-index:3;pointer-events:none;text-decoration:none}
.barcode u::before,.barcode u::after{
  content:''; position:absolute; left:-6%; right:-6%;
  bottom:calc(18.724% + var(--s)*0.6749);
  mix-blend-mode:var(--bar-blend);
}
.barcode u::before{                       /* soft wash                 */
  height:13%; margin-bottom:-6.5%;
  background:linear-gradient(to top,transparent,var(--bar-beam),transparent);
  opacity:.32; filter:blur(4px);
}
.barcode u::after{                        /* the core line             */
  height:2px; margin-bottom:-1px; background:#fff;
  box-shadow:0 0 7px 1px var(--bar-beam),
             0 0 20px 4px color-mix(in srgb,var(--bar-beam) 55%,transparent);
}

@media (prefers-reduced-motion:reduce){
  .barcode{transition:none}
  .barcode u{display:none}
}

<div class="barcode" style="width:252px" role="img" aria-label="Barcode 728473784337" tabindex="0">
  <i style="--t:4.733;--h:1.235;--l:12.698;--w:69.048"></i>
  <i style="--t:7.613;--h:1.235;--l:12.698;--w:69.048"></i>
  <i style="--t:10.082;--h:1.235;--l:17.460;--w:50.000"></i>
  <i style="--t:14.198;--h:4.938;--l:12.698;--w:52.381"></i>
  <i style="--t:20.370;--h:3.292;--l:12.698;--w:57.937"></i>
  <i style="--t:26.543;--h:1.235;--l:12.698;--w:48.413"></i>
  <i style="--t:29.835;--h:6.173;--l:12.698;--w:55.556"></i>
  <i style="--t:37.243;--h:1.235;--l:18.254;--w:49.206"></i>
  <i style="--t:40.123;--h:5.350;--l:12.698;--w:55.556"></i>
  <i style="--t:47.119;--h:1.235;--l:12.698;--w:52.381"></i>
  <i style="--t:49.588;--h:1.235;--l:12.698;--w:50.000"></i>
  <i style="--t:53.292;--h:1.235;--l:12.698;--w:50.000"></i>
  <i style="--t:56.996;--h:1.235;--l:16.667;--w:50.794"></i>
  <i style="--t:60.288;--h:1.235;--l:12.698;--w:50.794"></i>
  <i style="--t:63.992;--h:2.058;--l:12.698;--w:54.762"></i>
  <i style="--t:66.872;--h:2.469;--l:12.698;--w:54.762"></i>
  <i style="--t:70.988;--h:1.235;--l:17.460;--w:50.000"></i>
  <i style="--t:73.457;--h:4.938;--l:12.698;--w:53.968"></i>
  <i style="--t:81.276;--h:1.235;--l:12.698;--w:51.587"></i>
  <i style="--t:84.568;--h:1.235;--l:12.698;--w:50.794"></i>
  <i style="--t:87.449;--h:1.235;--l:18.254;--w:69.048"></i>
  <i style="--t:89.918;--h:1.235;--l:12.698;--w:70.635"></i>
  <b class="enc">728473784337</b>
  <b class="dec">PATHPEPTIDES</b>
  <u></u>
</div>