Shaders
header.lightDarkMode D
Gallery

Two interlocking circular rings rendered with a glossy glass material effect against a pure black background. The rings feature a gradient color transition from vibrant magenta on the left side to soft pink and light cyan on the right side, creating a smooth chromatic shift across the forms. The glass shader produces a subtle frosted appearance with visible fresnel highlights along the edges, particularly noticeable as bright white reflections on the upper portions of both rings. The rings have a thickness of approximately 5% of their diameter and are positioned at a slight 3D angle, with the upper ring appearing to pass behind the lower ring, creating depth and dimensionality. A very subtle halftone pattern (CMYK style at 17% opacity) is visible as a fine dot texture overlay, adding a print-like quality to the otherwise smooth surfaces. The lighting angle at 224 degrees creates directional highlights that enhance the glass-like refraction and give the rings a luminous, three-dimensional quality. The overall effect is modern, sleek, and has a premium aesthetic with the gradient colors suggesting motion or energy flowing through the interlocked forms.

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="-39" color-a="#7dfbff" color-b="#3ef7a1" color-c="#ff00bf" color-space="oklab" 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>