Radial Overlap 2

A fluid, organic gradient composition featuring smooth flowing curves and wave-like shapes. The primary visual effect consists of a swirl pattern that blends two dominant colors: a vibrant magenta/purple (#b44fbb) and a muted tan/beige (#bab993). The magenta appears concentrated in the upper left corner and lower right portion, creating diagonal sweeping curves that flow across the canvas. The tan color fills the central and upper right areas. The transition between colors is soft and blended, creating a seamless gradient effect. Overlaid on this swirl base is a pixelation effect that varies in intensity across the image - the pixelation is more pronounced in areas influenced by the conic gradient's alpha channel, creating a subtle textured appearance that becomes finer toward the center and edges. The overall composition has a modern, abstract aesthetic with flowing organic shapes rather than geometric forms. The effect creates depth through color variation and subtle texture modulation, with no harsh edges or defined boundaries. The atmosphere is smooth and ethereal, with a contemporary design sensibility.

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="#b44fbb" color-b="#bab993" 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>