Hex Path 4

A dark, sophisticated shader effect featuring a hexagonal grid pattern as the primary structural element. The hexagons are arranged in a regular tessellation across the entire canvas, with their outlines rendered in warm golden-orange tones (#ffcc00, #ff8a00, #ffd97a). The grid lines gradually brighten from left to right, creating a directional lighting effect that suggests illumination from the upper-right portion of the image. The background is predominantly black (#080808) with subtle warm brown undertones (#2a1408) that create depth through a radial gradient emanating from the bottom-center. The hexagon outlines vary in thickness, with thicker, more luminous lines concentrated in the upper-right quadrant, gradually fading to thinner, dimmer lines toward the left and bottom edges. A soft glow effect radiates from the brighter hexagon lines, creating a halo-like luminescence around the illuminated cells. The overall atmosphere is technological and elegant, with a warm color temperature dominated by golden yellows and burnt oranges against the deep black background. Film grain texture is subtly applied across the entire composition, adding a slight grittiness and analog quality to the otherwise digital aesthetic. The effect suggests either a heat map visualization, a futuristic interface, or an abstract representation of energy distribution across a honeycomb structure.

<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="#2a1408" color-b="#080808" :radius="1.4" />
    <Ripples :center="{ x: 0, y: 1 }" color-a="#a83806" color-b="#1a0f0a" :frequency="8.1" mask-source="idmoz40cq9qk5jrget0" :softness="1.8" :thickness="0" />
    <ChromaFlow base-color="#ff6a1a" down-color="#c43a05" left-color="#ff8a00" mask-source="idmoz40cq9qk5jrget0" :momentum="15" :radius="3.8" right-color="#ffd97a" up-color="#ffcc00" />
    <Glow :intensity="21" :size="6" :threshold="0.1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>