Geogrid 9

A vibrant green gradient background featuring an isometric geometric pattern composed of interconnected diamond and chevron shapes. The shapes are rendered with fine diagonal line hatching in a lighter green (#00fa6f) that creates a textured, three-dimensional appearance. Multiple layered geometric forms are positioned at various depths across the composition, creating an illusion of floating 3D blocks or crystalline structures. The wave distortion effect creates subtle undulations across the grid pattern, giving the entire composition a fluid, organic quality despite the rigid geometric structure. The hardLight blend mode on the grid elements causes the lighter green lines to appear luminous and slightly glowing against the darker green base. The overall effect is modern, tech-forward, and dynamic, with a sense of depth and movement created by the combination of the swirl base effect, wave distortion, and grid overlay. The composition has a clean, minimalist aesthetic with precise geometric control.

<script setup lang="ts">
import {
  Shader,
  Grid,
  GridDistortion,
  Swirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :coarse-x="26" :coarse-y="24" color-a="#2dba06" color-b="#2ad602" color-space="oklch" :detail="0.7" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" :speed="1.5" />
    <WaveDistortion :angle="90" blend-mode="linearDodge" edges="mirror" :frequency="1.3" :speed="0.5" :strength="0.8" wave-type="triangle">
      <Grid blend-mode="hardLight" :cells="29" color="#00fa6f" :thickness="3.5" :transform="{ scale: 0.75 }" />
    </WaveDistortion>
    <GridDistortion :decay="1.8" edges="wrap" :grid-size="8" :intensity="5" :radius="1.75" :swirl="0.1" />
  </Shader>
</template>