Dither Logo 8

A modern gradient shader effect featuring a smooth transition from vibrant purple on the left to soft cyan and pale green on the right. The background uses a radial gradient centered slightly left of center, blending deep purple (#6a01e3) with muted sage green (#99ada2). Overlaid on this base is an animated plasma effect with cyan (#3893a9) and mint green (#72ceae) tones, creating organic flowing patterns with moderate warp and density. The plasma effect is masked to an SVG logo shape (four rounded geometric forms arranged in a 2x2 grid pattern), making the cyan-green plasma visible only within those letter-like shapes. A subtle dither pattern with white highlights and a linear dodge blend mode adds fine texture and luminosity across the entire composition, creating a grainy, slightly pixelated quality that enhances the digital aesthetic. The overall mood is contemporary and tech-forward, with smooth color transitions and a gentle, flowing energy from the plasma animation.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Dither,
  ImageTexture,
  Plasma,
  RadialGradient
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ImageTexture id="idmmaykb1vflvohydj1" object-fit="contain" :transform="{ offsetX: -0.35, scale: 0.6 }" url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/c42DCkk-W-da.svg" :visible="false" />
    <RadialGradient :center="{ x: 0, y: 0.5 }" color-a="#6a01e3" color-b="#99ada2" color-space="oklab" :radius="1.7" />
    <Plasma :balance="55" color-a="#3893a9" color-b="#72ceae" color-space="oklab" :density="1.7" :intensity="3" mask-source="idmmaykb1vflvohydj1" />
    <Dither blend-mode="linearDodge" color-mode="source" pattern="bayer8" :pixel-size="3" :threshold="0.96" />
  </Shader>
</template>