Canvas 2D Brand Line Cards

Create one polished, responsive, self-contained HTML file titled “Identity, in lines.” It must work by opening the file directly in a modern browser. Use native HTML, CSS, JavaScript, Canvas 2D, and Path2D only. Do not use libraries, frameworks, modules, build tools, images, image URLs, external SVG files, external fonts, or network requests. Return the complete HTML and nothing else.

1. Page and cards
Build a restrained editorial page with a small “StyleKit / Visual studies” signature and a motion toggle in the top row. The heading is “Identity, in lines.” with the intro “Move through a familiar mark. Find the structure beneath the surface.” Put three brand cards in one desktop row inside a maximum 1,200-pixel content width, with 19-pixel gaps. Cards have a 0.70 width-to-height aspect ratio, a 17-pixel radius, and a minimum height near 460 pixels; stack them on screens at or below 650 pixels. Each card has a small line-drawn mark and brand name at top left. At bottom left use these exact taglines followed by a “Reveal the source →” button: Apple, “Think different.”; Google, “Find your next possibility.”; Tesla, “Accelerate the future.” The footer reads “A study of recognition and reconstruction.” and “One path. A field of light. Four line weights.” Use Georgia/Times serif for the 38–57px main heading and Arial/Helvetica sans-serif for the card text, with 27–37px card taglines. Keep all font stacks local. Apple uses background #eeeeeb and ink #202220; Google uses background #2152e7 and ink #c2dcff; Tesla uses background #111212 and ink #ec353e. Use a blue detection accent per brand as listed in the path payload. The source button opens an accessible dialog showing that brand’s exact path, with a close control. Keep the cards legible, unclipped, and touch friendly.

2. One-time path sampling
Use the exact three 24-by-24 Path2D path strings in the payload below. Keep each mark centered with its listed scale: multiply the 300-pixel scratch size by scale divided by 24, translate to the center, then translate the path origin by -12,-12. For each brand, create one detached scratch canvas at 300 by 300 pixels: 60 grid cells times 5 supersampling pixels. Paint it opaque black, then fill the brand Path2D in white. Read image data exactly once. For every 60-by-60 cell, calculate Rec. 709 luminance as 0.2126 R + 0.7152 G + 0.0722 B, divide by 255, average its 5-by-5 source pixels, and store the result in a Float32Array of 3,600 values. Keep only that array and the brand metadata. Set the scratch canvas width and height to zero and let its context and pixel buffer go out of scope. Never sample the path again, including after resize.

3. Quantized vertical-line drawing
Use 60 equally spaced columns and 30 vertical segments per card. Each segment represents the mean luminance of two adjacent grid rows. Quantize that value into exactly four levels using thresholds 0.12, 0.42, and 0.89. Use only these line widths, multiplied by cell size divided by 5.25: 0.38, 1.12, 2.28, and 3.80. Make each segment nearly two cells tall with a 0.7-pixel gap, flat line caps, and opacities 0.15, 0.64, 0.93, and 1 so the marks read as segmented bamboo-like strokes. Group paths by level and stroke each group once per frame. Draw small header marks from the stored luminance table too; never add a logo image or SVG element.

4. Slow, repeatable flowing noise
Create one shared 128-by-128 seeded random lattice once with a deterministic xorshift integer PRNG starting at seed 7319: state ^= state << 13; state ^= state >>> 17; state ^= state << 5. Convert each generated unsigned integer to a value from -1 to 1 by dividing by 4,294,967,295, multiplying by 2, then subtracting 1. Use smooth bilinear value noise, smoothing each local fraction t with t*t*(3-2*t); use each brand’s seed as its horizontal offset. For each segment sample x at column times 0.15 plus the brand seed, and sample y at row times 0.16 minus elapsed seconds times 0.17. This makes the visible pattern drift slowly downward. Set adjusted luminance to luminance times 0.94 plus noise times 0.12 times (0.25 plus luminance times 0.75), then choose the four line levels. The result should make the line weights drift gently while the pointer is idle. Do not use Math.random during animation.

5. Pointer response and spring return
Track pointer coordinates in card-local CSS pixels. Coalesce incoming pointer events: keep the latest client coordinates and read the card bounds once in the next animation frame. Only update the status text when its state changes. When the pointer enters, touches, or travels more than 1.5 pixels from the last impulse position, set a pulse to 1 and give nearby segment positions a brief radial impulse. Use a radius of one quarter of the logo plot width. Let influence be max(0, 1 - distance/radius); square it, multiply by pulse and 25, then use the radial direction for the target offset, with vertical movement scaled by 0.58. Model displacement with a damped spring: stiffness 145, damping 19, and a maximum integration step of 1/30 second. Settle every segment back to its original grid coordinate after the impulse decays; a stationary pointer must not hold the lines apart. Let the pulse decay as exp(-dt * 5.5). Mouse and touch use this spring response; keyboard focus reveals the detection overlay without requiring simulated pointer movement.

6. Deterministic detection callouts
Derive callouts from the current numerical line field, never from an AI service or fixed coordinates computed at initialization. While the overlay is visible, rescan at most every 100ms. Reuse a 60-by-60 Float32Array and clear it for each scan. For each displayed two-row segment, take its current noisy luminance and bilinearly deposit that value into both grid rows at their current spring-displaced positions. Keep using the one-time source table; do not read canvas pixels again. When paused, focus or resize may produce one static rescan, with no continuous scheduling.

Use a summed-area table over this live field to score 7-by-7 windows by mean luminance; pad each selected window by one cell. Ignore an empty field whose best mean is below 0.04. Keep scores at least 48% of the brightest candidate. Apply spatial non-maximum suppression with a 16-cell center distance, relaxing to 12 cells if needed to get at least two regions; retain up to three. For stable ties, add a small spatial prior of 0.025 * exp(-squaredDistanceToPreviousTarget / 128) to candidate ranking. Match new windows to nearby previous targets within 12 cells, keeping identities, velocity and connector order. Only detection targets snap to integer grid cells. Move the displayed boxes with a critically damped spring, stiffness 144 and damping 24, using substeps no larger than 1/120 second. Render fractional grid positions every frame; never round them back to whole cells, which cancels smooth motion. Show the current displayed coordinates to one decimal place while moving, and settle exactly on the target. For an unrelated target, fade the old box below 0.04 opacity before replacing its location, then fade the new one in. Use 1 - exp(-dt * 16) for opacity. Keep at most three slots and fade each connector with the lower endpoint opacity, so links cannot visibly teleport either. While paused, update directly to a stable frame without scheduling fade animation.

Draw blue boxes, faint fills, emphasized corners, x/y coordinates, and thin connectors. Reveal them for pointer or keyboard focus and fade them out on leave. A stable signal may keep a stable box, but noise and pointer deformation must be able to change the detected positions. Never add arbitrary random wandering or claim real AI inference.

7. Canvas quality, motion, and access
Use a visible canvas for each card. Set its backing width and height to the canvas's actual CSS size multiplied by the current devicePixelRatio, rounded to integers, then set the 2D transform so drawing coordinates remain CSS pixels. Clear and redraw on every requestAnimationFrame frame. Use ResizeObserver for card size changes without resampling the marks. A DPR-only change must also update the backing store even when CSS width and height stay unchanged: compare the current DPR with the cached DPR before drawing, or re-arm a resolution matchMedia listener; ResizeObserver alone is insufficient. With motion paused, DPR and resize events must still update and draw one static frame. Verify a DPR 1 to 2 switch at the same CSS viewport size while the sampling count remains three. Keep the line animation smooth on high-density screens. Provide a keyboard-operable motion toggle with an accurate aria-pressed value; honor prefers-reduced-motion by starting still. Cards must be keyboard focusable and have useful accessible names; canvases are decorative and hidden from assistive technology. Handle touch, and keep pointer targets large enough for mobile.

8. Lifecycle and responsive behavior
Pause animation while the document is hidden, a card is offscreen, or a source dialog is open; resume with a reset frame timestamp so a long pause cannot create a large time step. Use IntersectionObserver for offscreen cards. When motion is paused, render a stable frame and stop scheduling continuous frames. On narrow screens, use a single-column card layout while preserving the logo plot and footer spacing. If Canvas 2D or Path2D is unavailable, show a short in-page fallback message without throwing an uncaught error.

9. Inspect before returning
Check the finished file against these observable conditions: it contains exactly three cards and the exact path data below; it makes one pixel read per brand at initialization and zero reads on later frames or resize; each stored table is 60 by 60; each card draws 60 columns by 30 segments with four widths only; idle noise is seeded and moves downward; pointer and touch trigger a spring that returns to rest, while keyboard focus reveals the callouts; up to three grid-snapped callouts are connected and blue; DPR 2 produces a twice-sized backing store; reduced motion starts still; mobile cards stack; there are no external requests, image elements, or console errors. Do not claim these checks passed unless you actually inspect or run the generated file.

Exact mark payload (preserve the path strings):
Apple — seed 3, scale 0.82, background #eeeeeb, ink #202220, detection #267dff
M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701

Google — seed 29, scale 0.79, background #2152e7, ink #c2dcff, detection #91dcff
M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z

Tesla — seed 51, scale 0.81, background #111212, ink #ec353e, detection #4eaeff
M12 5.362l2.475-3.026s4.245.09 8.471 2.054c-1.082 1.636-3.231 2.438-3.231 2.438-.146-1.439-1.154-1.79-4.354-1.79L12 24 8.619 5.034c-3.18 0-4.188.354-4.335 1.792 0 0-2.146-.795-3.229-2.43C5.28 2.431 9.525 2.34 9.525 2.34L12 5.362l-.004.002H12v-.002zm0-3.899c3.415-.03 7.326.528 11.328 2.28.535-.968.672-1.395.672-1.395C19.625.612 15.528.015 12 0 8.472.015 4.375.61 0 2.349c0 0 .195.525.672 1.396C4.674 1.989 8.585 1.435 12 1.46v.003z