My first procedurally generated animation drawing concentric heart -growing from the center of the screen. The source code for the -program used to create this piece is available on my GitHub.
I tinkered around for quite a while before discovering that I can intersect two skewed ellipses +with the absolute value operator. Here’s my custom equation for the heart shape.'>
Jan 18, 2026
Step to the đ beat
My first procedurally generated animation using shaders.
The shader can be visualized with glslViewer.
uniform vec2 u_mouse;
+uniform vec2 u_resolution;
+uniform float u_time;
+
+void main (void) {
+ vec2 st = gl_FragCoord.xy/u_resolution.xy;
+ float aspect = u_resolution.x/u_resolution.y;
+ st.x *= aspect;
+
+ // positioning shenanigans
+ st.x = st.x * 2.0 - 1.8;
+ st.y = st.y * 2.0 - 0.9;
+
+ float r = st.x*st.x + st.y*st.y - abs(st.x)*st.y;
+ r *= 2.0;
+
+ float duration = 3.0;
+ float bin = 0.1;
+ float scaled_time = fract(u_time/duration);
+ float loop = scaled_time * 2.0 - 1.0;
+ float r_disc = floor((r + loop*loop)/bin) * bin;
+
+ vec3 deep_pink = vec3(0.917, 0.235, 0.478);
+ vec3 light_pink = vec3(0.976, 0.780, 0.803);
+
+ if (r_disc >= 1.0) {
+ gl_FragColor = vec4(deep_pink, 1.0);
+ return;
+ }
+ vec3 color = mix(deep_pink, light_pink, r_disc);
+ gl_FragColor = vec4(color,1.0);
+}
+I tinkered around for quite a while before discovering that I can intersect two skewed ellipses with the absolute value operator. Here’s my custom equation for the heart shape.
have fun!
