Dither Logo 3

A vibrant shader effect featuring a stylized four-lobed circular logo design centered on a magenta gradient background. The logo consists of four rounded rectangular segments arranged in a pinwheel pattern, each with a lime-green to yellow-green gradient fill that creates dimensional depth. The background transitions from deep magenta (#ca19d1) at the edges to a darker purple-black (#240816) toward the center, creating a radial gradient effect. A dynamic plasma effect with green and yellow-green tones animates across the logo, creating organic flowing patterns and subtle distortions. The plasma generates a natural, liquid-like movement with visible density variations and color shifts between dark green (#0c8013) and light yellow-green (#bbc970). A dithering effect with a Bayer8 pattern adds fine texture and grain throughout, applied with linear dodge blending at high threshold (0.96), creating a subtle pixelated quality that enhances the digital aesthetic. The overall composition has high contrast and saturation, with the bright lime-green logo elements popping dramatically against the rich magenta background. The effect conveys a modern, energetic, and slightly psychedelic atmosphere with smooth gradients interrupted by the granular dither pattern.

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="{ scale: 0.6 }" url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/c42DCkk-W-da.svg" :visible="false" />
    <RadialGradient color-a="#240816" color-b="#ca19d1" color-space="oklab" />
    <Plasma :balance="63" color-a="#0c8013" color-b="#bbc970" color-space="hsl" :contrast="2.6" :density="1.7" :intensity="3" mask-source="idmmaykb1vflvohydj1" />
    <Dither blend-mode="linearDodge" color-mode="source" pattern="bayer8" :pixel-size="2" :threshold="0.96" />
  </Shader>
</template>