background-image: radial-gradient(
  circle, var(--tlx-accent) 1px, transparent 1px
);
background-size: 24px 24px;

Click to copy

background-image: radial-gradient(
  circle, var(--tlx-accent) 0.8px, transparent 0.8px
);
background-size: 12px 12px;

Click to copy

background-image: radial-gradient(
  circle, var(--tlx-accent) 1.2px, transparent 1.2px
);
background-size: 40px 40px;

Click to copy

<svg>
  <pattern id="crosshair" width="48" height="48"
    patternUnits="userSpaceOnUse">
    <line x1="24" y1="18" x2="24" y2="30"
      stroke="var(--tlx-accent)" stroke-width="0.8" opacity="0.5"/>
    <line x1="18" y1="24" x2="30" y2="24"
      stroke="var(--tlx-accent)" stroke-width="0.8" opacity="0.5"/>
  </pattern>
  <rect fill="url(#crosshair)"/>
</svg>

Click to copy

<svg>
  <pattern id="crosshair-tight" width="24" height="24"
    patternUnits="userSpaceOnUse">
    <line x1="12" y1="8" x2="12" y2="16"
      stroke="var(--tlx-accent)" stroke-width="0.6" opacity="0.4"/>
    <line x1="8" y1="12" x2="16" y2="12"
      stroke="var(--tlx-accent)" stroke-width="0.6" opacity="0.4"/>
  </pattern>
  <rect fill="url(#crosshair-tight)"/>
</svg>

Click to copy

background-image:
  linear-gradient(var(--tlx-border-default) 1px, transparent 1px),
  linear-gradient(90deg, var(--tlx-border-default) 1px, transparent 1px);
background-size: 48px 48px;
transform: perspective(600px) rotateX(55deg) scale(2);
transform-origin: center bottom;

Click to copy

<svg>
  <pattern id="symbol-grid" width="56" height="56"
    patternUnits="userSpaceOnUse">
    <path d="M22 20 L28 20 L34 28 L28 36 L22 36 L16 28 Z"
      fill="none" stroke="var(--tlx-accent)"
      stroke-width="0.7" opacity="0.35"/>
  </pattern>
  <rect fill="url(#symbol-grid)"/>
</svg>

Click to copy

<svg>
  <pattern id="plus-grid" width="32" height="32"
    patternUnits="userSpaceOnUse">
    <line x1="16" y1="12" x2="16" y2="20"
      stroke="var(--tlx-accent)" stroke-width="1" opacity="0.4"/>
    <line x1="12" y1="16" x2="20" y2="16"
      stroke="var(--tlx-accent)" stroke-width="1" opacity="0.4"/>
  </pattern>
  <rect fill="url(#plus-grid)"/>
</svg>

Click to copy

/* Top-left & bottom-right corner brackets */
.frame-bracket {
  position: relative;
}
.frame-bracket::before,
.frame-bracket::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--tlx-accent);
  border-style: solid;
}
.frame-bracket::before {
  top: 0; left: 0;
  border-width: 2px 0 0 2px;
}
.frame-bracket::after {
  bottom: 0; right: 0;
  border-width: 0 2px 2px 0;
}

Click to copy

/* Angled corner cuts via clip-path */
.frame-tech {
  clip-path: polygon(
    16px 0%, calc(100% - 16px) 0%,
    100% 16px, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 16px 100%,
    0% calc(100% - 16px), 0% 16px
  );
  border: 1px solid var(--tlx-accent);
  background: var(--tlx-bg-surface);
}

Click to copy

/* Notched corners using pseudo-elements */
.frame-notch {
  position: relative;
  border: 1px solid var(--tlx-border-default);
}
.frame-notch::before,
.frame-notch::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--tlx-accent);
}
.frame-notch::before {
  top: -1px; left: -1px;
}
.frame-notch::after {
  bottom: -1px; right: -1px;
}

Click to copy

background-image: repeating-linear-gradient(
  -45deg,
  transparent,
  transparent 8px,
  var(--tlx-border-default) 8px,
  var(--tlx-border-default) 9px
);

Click to copy

background-image: url("data:image/svg+xml,...");
/* feTurbulence fractalNoise, baseFrequency 0.65 */
/* opacity: 0.08 — subtle grain overlay */
background-repeat: repeat;
background-size: 256px 256px;

Click to copy