Rounded Panels 9

A dynamic striped shader effect featuring diagonal lines at an 18-degree angle running across the composition. The stripes alternate between a deep forest green (#2a5c4e) and a soft sage green (#8bc4a0), creating a rhythmic pattern with 12 stripes per unit density. The effect demonstrates a radial gradient influence from an invisible circular mask positioned at coordinates (0.55, 0.42) with a radius of 1.7 units, which modulates the balance between the two colors - creating areas of stronger color saturation near the circle's center and more muted tones toward the edges. The stripe balance ranges from 0.1 to 0.9 opacity based on the circular mask's alpha channel, producing a subtle vignette-like effect where stripes appear more pronounced in the upper-left and lower-right regions. The overall mood is calm and organic, with a gentle wave-like quality created by the soft 0.1 softness value on the invisible circular mask. The linear color space ensures smooth color transitions, and the normal blend mode maintains the integrity of the stripe pattern without additional visual distortion.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes :angle="18" :balance="{ type: 'map', source: 'idmlsathgg7fl4tmxmi', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 0.9, outputMin: 0.1 }" color-a="#2a5c4e" color-b="#8bc4a0" :density="12" />
    <Circle id="idmlsathgg7fl4tmxmi" :center="{ x: 0.55, y: 0.42 }" :radius="1.7" :softness="0.1" :visible="false" />
  </Shader>
</template>