Medium Game effectsAnimated
Swirl portal
A glowing ring with a spiral of blue and cyan bands twisting into its center.
How this challenge works
You write a fragment shader that draws the picture above, live in your browser. A match bar shows how close you are, and the score combines accuracy, code size (the par is 464 characters in Unity (Built-in)) and GPU speed. Work in HLSL, GLSL, WGSL, Metal or Godot and export the result when you are done.
What it is built from
- Space
p = (uv - 0.5) * float2(aspect, 1.0), r = length(p), a = atan2(p.y, p.x)- Spiral
bands = 0.5 + 0.5 * sin(a * ? + ? / (r + ?) - time * ?): the 1 / r term twists the arms tighter near the middle- Inside
1.0 - smoothstep(?, ?, r)- Ring glow
exp(-abs(r - ?) * ?)- Colors
background float3(0.03, 0.02, 0.06), portal lerp(float3(0.1, 0.0, 0.3), float3(0.2, 0.9, 1.0), bands), ring float3(0.5, 0.3, 1.0)
The exact numbers are left out (shown as ?), but every colour is given. Measure the rest with the pixel readout on both pictures and Diff.
Solve it in your language
Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start coding