Background pattern snippets

Copy the markup block for whichever pattern you want to use. Each pairs with classes already defined in assets/3dm.css under "BACKGROUND PATTERN LIBRARY".

A - Aurora

<div class="bgp-aurora">
  <div class="bgp-blob bgp-b1"></div>
  <div class="bgp-blob bgp-b2"></div>
</div>

B - Contours

<div class="bgp-contours"></div>

C - Scan sweep

<div class="bgp-scansweep"></div>

D - Point cloud

<div class="bgp-pointcloud">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">
    <g fill="#53b9cf">
      <circle cx="8" cy="14" r="0.9"/><circle cx="22" cy="9" r="0.7"/><circle cx="35" cy="20" r="1"/>
      <circle cx="49" cy="11" r="0.7"/><circle cx="61" cy="22" r="0.9"/><circle cx="74" cy="13" r="0.8"/>
      <!-- see final-backgrounds-gallery.html for the full dot set -->
    </g>
  </svg>
</div>

E - Layer build

<div class="bgp-layerbuild">
  <div class="bgp-lines"></div>
  <div class="bgp-rise"></div>
</div>

F - Gyroid infill (PLACEHOLDER - not resolved)

<div class="bgp-gyroid-placeholder"></div>
<!-- do not use in production; accurate pattern still pending -->

G - Wireframe mesh

<svg class="bgp-mesh" viewBox="0 0 200 130" preserveAspectRatio="xMidYMid slice" style="position:absolute;inset:0;width:100%;height:100%">
  <g fill="#53b9cf">
    <polygon points="0,0 50,30 15,65"/><polygon points="50,30 15,65 70,75"/>
    <!-- see final-backgrounds-gallery.html for the full triangle set -->
  </g>
</svg>

H - Lidar sweep

<div class="bgp-lidar">
  <div class="bgp-rings"></div>
  <div class="bgp-beam"></div>
</div>

K - Structured light

<svg class="bgp-structured" viewBox="0 0 200 130" preserveAspectRatio="none" style="position:absolute;inset:0;width:100%;height:100%">
  <g stroke="#53b9cf" stroke-opacity="0.45" fill="none">
    <path d="M0,15 Q50,35 100,15 T200,15"/>
    <!-- see final-backgrounds-gallery.html for the full wave set -->
  </g>
</svg>

M - Blueprint ticks

<svg viewBox="0 0 200 130" style="position:absolute;inset:0;width:100%;height:100%">
  <g class="bgp-tick" stroke="#53b9cf" stroke-opacity="0.6">
    <line x1="40" y1="30" x2="40" y2="45"/><line x1="32" y1="37" x2="48" y2="37"/>
  </g>
  <line class="bgp-dim" x1="40" y1="37" x2="150" y2="97" stroke="#53b9cf" stroke-opacity="0.5"/>
</svg>

N - Musketeer trilateral

<svg viewBox="0 0 200 130" style="position:absolute;inset:0;width:100%;height:100%">
  <g class="bgp-triline" stroke="#53b9cf" stroke-opacity="0.5">
    <line x1="55" y1="30" x2="30" y2="95"/><line x1="55" y1="30" x2="140" y2="55"/><line x1="30" y1="95" x2="140" y2="55"/>
  </g>
  <circle class="bgp-node" cx="55" cy="30" r="3" fill="#e1522a"/>
  <circle class="bgp-node" cx="30" cy="95" r="3" fill="#e1522a"/>
  <circle class="bgp-node" cx="140" cy="55" r="3" fill="#e1522a"/>
</svg>

O - Ember drift

<svg viewBox="0 0 200 130" style="position:absolute;inset:0;width:100%;height:100%">
  <g fill="#e1522a">
    <circle class="bgp-ember" cx="30" cy="110" r="2" style="animation-duration:5s;animation-delay:0s"/>
    <!-- see final-backgrounds-gallery.html for the full particle set -->
  </g>
</svg>

I - Logo trace, Style A (discrete chase)

<div class="bgp-logo-stage" style="--logo-scale:0.85;--logo-x:0%;--logo-y:0%;">
  <svg viewBox="0 0 160 222" preserveAspectRatio="xMidYMid meet">
    <path class="bgp-logo-chase bgp-t1" pathLength="1000" d="[LOGO_PATH]"/>
    <path class="bgp-logo-chase bgp-t2" pathLength="1000" d="[LOGO_PATH]"/>
    <path class="bgp-logo-chase bgp-t3" pathLength="1000" d="[LOGO_PATH]"/>
    <path class="bgp-logo-chase bgp-t4" pathLength="1000" d="[LOGO_PATH]"/>
    <path class="bgp-logo-chase bgp-t5" pathLength="1000" d="[LOGO_PATH]"/>
    <path class="bgp-logo-chase bgp-t6" pathLength="1000" d="[LOGO_PATH]"/>
  </svg>
</div>
<!-- [LOGO_PATH] = the full path data in logo_path_v2.txt / already embedded in 3dm.js -->
<!-- adjust placement per page by changing --logo-scale / --logo-x / --logo-y -->

I - Logo trace, Style B (light-painting fade)

<div class="bgp-logo-stage" style="--logo-scale:0.85;--logo-x:0%;--logo-y:0%;">
  <canvas class="bgp-logo-paint" data-bg="#0c182e" data-stroke="#53b9cf"></canvas>
</div>
<!-- data-bg / data-stroke should match the section's background (navy vs orange) -->
<!-- 3dm.js finds this canvas automatically and animates it - no extra JS needed -->