Radial Overlap 5

A dynamic abstract shader effect featuring layered diagonal stripes and curved geometric forms. The composition uses a swirl distortion effect that creates flowing, wave-like patterns emanating from the left side toward the right. The primary visual elements consist of alternating bands of light cyan (#b6e0e0) and deep blue (#1835db) that create a sense of motion and depth. The stripes appear to have soft, feathered edges with gradient transitions between colors, creating a smooth blending effect. A pixelation effect is applied with varying scale intensity, creating a subtle granular texture that becomes more pronounced in certain areas, particularly where the conic gradient's alpha channel influences the effect. The overall composition has a modern, tech-forward aesthetic with a cool color palette dominated by blues and cyans. The left side features a curved, almost organic shape with darker blue tones, while the right side transitions to lighter, more transparent cyan tones. The effect creates an illusion of three-dimensional depth through layering and opacity variations. The animation loop on the conic gradient (rotating at 0.1 speed) suggests this is a living, breathing effect with subtle rotational movement. The blend mode is set to normal throughout, maintaining color integrity while the swirl effect at 50% blend creates harmonious color mixing.

Code

vue

<script setup lang="ts">
import {
  Shader,
  ConicGradient,
  Pixelate,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ConicGradient id="idmpiichpr7x5ibv89b" :center="{ x: 0, y: 1 }" color-a="#ffffff" color-b="#ffffff00" :repeat="3" :rotation="{ mode: 'loop', type: 'auto-animate', speed: 0.1, outputMax: 360, outputMin: 0 }" :visible="false" />
    <Swirl color-a="#b6e0e0" color-b="#1835db" color-space="oklab" :detail="1.7" :visible="true" />
    <Pixelate :scale="{ type: 'map', curve: -0.65, source: 'idmpiichpr7x5ibv89b', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 93, outputMin: 1 }" />
  </Shader>
</template>