Shaders
header.lightDarkMode D
Gallery

Halftone Swirl 4

Halftone Swirl

A gradient shader effect transitioning from bright lime green at the top to a deeper, more saturated green at the bottom. The image features a halftone pattern overlay with a 45-degree angle creating a subtle dotted texture throughout the composition. Beneath the halftone effect is a swirl component that blends two green tones (#4ec15b and #9fff91) using LCH color space, creating organic, flowing variations in the green hues. The swirl effect adds subtle undulating distortions and color shifts that create depth and movement within the gradient. The overall effect is smooth and atmospheric with a gentle, natural feel. The halftone frequency of 100 creates a fine, barely noticeable dot pattern that adds texture without overwhelming the gradient. The blend mode is set to normal with full opacity, resulting in a cohesive, unified appearance. The edges fade transparently, and there is no rotation or offset applied to the transform.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#00bd40" />
    <Halftone :smoothness="0.1">
      <Swirl color-a="#4ec15b" color-b="#9fff91" color-space="lch" />
    </Halftone>
  </Shader>
</template>