Free Background

Cyber Hexagon Matrix

A futuristic honeycomb hexagon grid pattern with a radial focal glow and animated scanning sweep, built with pure inline SVG and CSS.

dark
pattern
hex
futuristic
svg
css

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="hex-wrap">
  <div class="hex-glow"></div>
  <div class="hex-grid"></div>
  <div class="hex-scan"></div>
  <div class="content">
    <div class="terminal-tag">SYSTEM ONLINE</div>
    <h1>Hexagon Matrix</h1>
    <p>Pure SVG honeycomb pattern &bull; Zero dependencies</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a futuristic cyberpunk hexagon honeycomb background using pure SVG and CSS.

Requirements:
- Full-viewport container with dark obsidian background (#04060d).
- A central blurred radial glow aura (indigo and orange).
- A repeating honeycomb hexagon grid using an inline SVG data URL in background-image, tiled with background-size 56px 96px.
- Fade out the hexagon grid towards outer edges with a radial mask-image.
- An animated subtle vertical scan line sweep using linear-gradient and keyframe animation.
- Centered terminal badge ("SYSTEM ONLINE") in monospace emerald green, with heading and subtitle.
- No JavaScript, no external images.

Return one HTML file with a <style> block.

How to build it, step by step

1
Create a repeating hexagon tile using an SVG path that draws a regular hexagon and repeats at 56px by 96px.
2
Embed the SVG directly as a data URL in background-image so no external image file is requested.
3
Add a radial mask-image to fade the pattern gracefully towards the screen edges.
4
Layer a soft blurred gradient behind the grid to act as an ambient light source.
5
Animate a subtle vertical linear-gradient sweep to simulate a scanning beam.

Customisation tips

Use SVG data URLs with URL-encoded hex colors (%23 instead of #) for cross-browser safety.
Change the stroke color to neon cyan or lime to suit your cyber/gaming brand aesthetic.
Pure CSS and SVG ensures zero runtime JavaScript overhead.