Shaders
header.lightDarkMode D
Gallery

Two interlocking circular rings rendered with a sophisticated glass shader effect against a pure black background. The upper ring features a gradient transitioning from soft pink/coral on the left through white at the top to magenta/purple on the right. The lower ring displays a complementary gradient flowing from pink/magenta on the upper portion through purple and blue on the right side, creating a smooth chromatic progression. Both rings have a luminous, translucent quality with subtle internal reflections and highlights characteristic of glass material. The rings overlap in the center, creating a Venn diagram-like intersection. A fine halftone texture with CMYK dot patterns is subtly visible across the surface at approximately 17% opacity, adding micro-level detail and print-like quality. The glass shader applies fresnel effects with soft edge highlights and a slight refraction distortion (1.05 intensity), giving the rings dimensional depth and a polished, three-dimensional appearance. The overall composition has a modern, premium aesthetic with smooth color transitions in OKLCH color space, creating harmonious gradients between the magenta, white, and blue anchor colors. The lighting angle is set to 224 degrees, creating subtle directional highlights on the ring surfaces.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <WorleyNoise id="idmp1dieut6oaemps9r" :balance="0.8" :contrast="4" distance="chebyshev" :jitter="0.5" mode="f2MinusF1" :scale="50" :seed="35" :visible="false" />
    <SolidColor color="#0a0a0a" />
    <Glass :aberration="0" :cutout="true" :fresnel="0.19" :fresnel-softness="0.26" :highlight="0.4" :highlight-softness="0.6" :light-angle="224" :refraction="1.05" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/NEnjqh3-kdfX_sdf.bin" :thickness="0.05">
      <ColorWheel :angle="47" color-a="#de39fa" color-b="#ffffff" mode="custom" :scale="{ type: 'map', curve: 0, source: 'idmp1dieut6oaemps9r', channel: 'luminance', inputMax: 1, inputMin: 0, outputMax: 4.1, outputMin: 4 }" :speed="0.3" />
      <Halftone :frequency="151" :opacity="0.17" style="cmyk" />
    </Glass>
  </Shader>
</template>