Shaders
header.lightDarkMode D
Gallery

Stretched Chevrons 9

Stretched Chevrons

A seamless repeating pattern of chevron shapes arranged in horizontal rows across the entire image. The chevrons are created using a gradient color scheme transitioning from warm orange (#ff6b1c) to golden yellow (#ffd84d). Each chevron has a pointed V-shape oriented at 90 degrees, creating a zigzag or sawtooth pattern that repeats 7 times across the width. The chevrons have soft, feathered edges with subtle anti-aliasing that creates a smooth transition between the colored shapes and the lighter yellow background (#ffd84d dominant). The overall effect has a 3D embossed or relief quality due to the soft shadows and highlights on each chevron point, giving depth to the flat pattern. The background is a uniform pale yellow with slight tonal variations that enhance the dimensional appearance of the chevron elements. The pattern creates a sense of movement and rhythm through the repetitive diagonal lines, with a warm, cheerful, and energetic mood. The softness parameter creates a gentle blur effect on the chevron edges, preventing harsh lines and maintaining visual harmony.

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="90" :balance="{ type: 'map', curve: -0.8, source: 'idmp1helxtfp3bsckef', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.01 }" color-a="#ff6b1c" color-b="#ffd84d" color-space="oklab" :count="7" :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>