Halftone Swirl 5

A gradient shader effect displaying a smooth color transition from turquoise/cyan in the upper left corner to yellow-green in the lower right corner. The gradient flows diagonally across the composition with a halftone pattern overlay consisting of small circular dots arranged at a 45-degree angle, creating a subtle texture throughout. The halftone frequency of 100 produces a fine, regular dot pattern that becomes more visible in the transition zones between colors. The swirl component beneath the halftone creates an underlying color blend between cyan (#2de6c3) and yellow-green (#c4d37c) using LCH color space, resulting in smooth, natural color transitions. The overall effect is a soft, textured gradient with a dotted halftone screen pattern that gives the image a printed or vintage aesthetic. The opacity is fully opaque at 1.0, and the blend mode is set to normal, allowing the halftone pattern to sit cleanly over the gradient base. The effect has no rotation or offset, maintaining a centered, symmetrical appearance.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#00adbd" />
    <Halftone :smoothness="0.1">
      <Swirl color-a="#c4d37c" color-b="#2de6c3" color-space="lch" />
    </Halftone>
  </Shader>
</template>