Hex Path

Open in editor

A sophisticated neon-lit hexagonal grid pattern dominates the center of the composition against a deep black background. The hexagons feature bright cyan and light-blue glowing edges that create a luminous wireframe effect. The grid consists of approximately 8-cell density with varying line thickness, creating a sense of depth and dimensionality. A radial gradient background transitions from dark navy blue (#121221) at the edges to pure black (#080808) at the center, establishing atmospheric depth. Ripple effects with soft blue tones (#052b69) flow across the hexagonal structure, creating subtle wave-like distortions that suggest motion and energy. A chromatic flow effect adds directional color gradients - cyan (#00c3ff) at the top, transitioning through blue (#5d9bf5, #2633ff) to purple (#570aff) on the left and lighter blue (#7d7dfa) on the right, creating a multi-directional color gradient that enhances the three-dimensional appearance. A prominent glow effect with high intensity (21) radiates outward from the bright edges, creating a soft halo and bloom effect typical of neon lighting. The overall atmosphere is futuristic and technological, with a cool color temperature dominated by blues and cyans. Fine film grain texture (0.05 strength) adds subtle noise for visual interest. The composition suggests a digital network, circuit board, or technological interface with interactive elements.

Code

vue

<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  Circle,
  FilmGrain,
  Glow,
  HexGrid,
  RadialGradient,
  Ripples
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Circle id="idmoz4cglxvtm21v60i" :center="{ type: 'mouse-position', originX: 0.5, originY: 0.5, momentum: 0.35, smoothing: 0.2 }" :softness="0.5" :visible="false" />
    <HexGrid id="idmoz40cq9qk5jrget0" color-a="#00000000" :thickness="{ type: 'map', source: 'idmoz4cglxvtm21v60i', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 3, outputMin: 0.4 }" :visible="true" />
    <RadialGradient :center="{ x: 0.5, y: 1 }" color-a="#121221" color-b="#080808" :radius="1.4" />
    <Ripples color-a="#052b69" color-b="#111114" :frequency="11.7" mask-source="idmoz40cq9qk5jrget0" :softness="1.8" :thickness="0" />
    <ChromaFlow base-color="#5d9bf5" down-color="#2633ff" left-color="#570aff" mask-source="idmoz40cq9qk5jrget0" :momentum="15" :radius="3.5" right-color="#7d7dfa" up-color="#00c3ff" />
    <Glow :intensity="21" :size="6" :threshold="0.1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>