Shaders
header.lightDarkMode D
Gallery

Stretched Chevrons 4

Stretched Chevrons

A geometric tessellation pattern composed of repeating L-shaped or chevron-like blocks arranged in a staggered grid formation. The pattern creates a 3D illusion through strategic use of gradient shading and shadow effects. Each block features a smooth gradient that transitions from a vibrant purple (#bd00ff) on the left and top edges to a lighter, more muted mauve-pink (#e2b9e7) on the right and bottom edges. The blocks are separated by thin gaps that create depth perception, with darker purple shadows appearing along the inner corners of each L-shaped element, enhancing the three-dimensional appearance. The overall background is a soft, uniform light pink that complements the purple tones. The lighting appears to come from the upper-left, creating consistent shadow placement across all repeated elements. The effect produces a subtle, elegant visual rhythm with a modern, minimalist aesthetic. The softness of the gradients and the careful balance between the two purple tones create a calming, sophisticated atmosphere.

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="#bd00ff" color-b="#e2b9e7" color-space="oklab" :count="4" :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>