Shaders
header.lightDarkMode D
Gallery

Stretched Chevrons 7

Stretched Chevrons

A geometric pattern composed of repeating chevron or staircase shapes arranged in a diagonal grid. The shapes create a 3D illusion through subtle shadow effects along the edges, giving depth and dimensionality to the flat surface. The primary color is a warm tan or beige (#c9b88a) that forms the main background and chevron shapes. Dark blue-gray shadows (#1a3a5c) are rendered along the inner edges of each step, creating a recessed or embossed appearance. The pattern repeats uniformly across the entire composition with consistent spacing and angle (45 degrees). The lighting appears to come from the upper left, casting shadows that enhance the three-dimensional stepped appearance. The overall effect is architectural and structured, resembling stacked blocks or a cascading staircase pattern viewed from above. The mood is calm and orderly, with a subtle interplay between the warm tan tones and cool dark blue accents creating visual interest without being overwhelming.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Chevron,
  ChromaFlow
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ChromaFlow id="idmp1helxtfp3bsckef" base-color="#ffffff" down-color="#ffffff" :intensity="0.6" left-color="#ffffff" :momentum="0" right-color="#ffffff" up-color="#ffffff" :visible="false" />
    <Chevron :angle="45" :balance="{ type: 'map', curve: -0.8, source: 'idmp1helxtfp3bsckef', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.01 }" color-a="#1a3a5c" color-b="#c9b88a" color-space="oklab" :softness="{ type: 'map', curve: 1, source: 'idmp1helxtfp3bsckef', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.01 }" :speed="0.1" :visible="true" />
  </Shader>
</template>