Stretched Chevrons 4
Stretched ChevronsA 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
<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>