diff --git a/learning/shapes/distancefield.frag b/learning/shapes/distancefield.frag
new file mode 100644
index 0000000..0b8dd66
--- /dev/null
+++ b/learning/shapes/distancefield.frag
@@ -0,0 +1,31 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+#define PI 3.14159265359
+
+float circle(in vec2 st, in float radius){
+  vec2 dist = st-vec2(.5);
+  return 1.-smoothstep(radius-(radius*.01),
+                       radius+(radius*.01),
+                       dot(dist,dist)*4.);
+}
+
+
+void main() {
+  vec2 st = gl_FragCoord.xy/u_resolution;
+  st.x *= u_resolution.x/u_resolution.y;
+  vec3 color = vec3(1.0);
+  float alpha = 0.;
+  float d = 0.0;
+  // remaps space to -1 1
+  st = st *2.-1.;
+  d = length(abs(st)-.3);
+  
+  
+
+  gl_FragColor = vec4(color, alpha);
+}
diff --git a/learning/shaping/dotgrid.frag b/learning/shaping/dotgrid.frag
index 8a69514..a1faf44 100644
--- a/learning/shaping/dotgrid.frag
+++ b/learning/shaping/dotgrid.frag
@@ -19,8 +19,11 @@ float circle_grid(in vec2 _st, in float _radius, in float amount, in float speed
 
 void main() {
   vec2 st = gl_FragCoord.xy/u_resolution;
+  st.x *= u_resolution.x/u_resolution.y;
   vec3 color = vec3(0.0,0.0,0.0);
   vec2 stm = (u_mouse/u_resolution)-vec2(.5);
+
+  circle_grid(st,(sin(u_time)+1.)/2., 8., 2.,stm.x, stm.y*-1.);
   color.r = circle_grid(st,(sin(u_time)+1.)/2., 8., 2.,stm.x, stm.y*-1.);
   color.g = circle_grid(st,(sin(u_time*2.)+1.)/4., 8., 2.,stm.x*-1., stm.y*-1.);
   color.b = circle_grid(st,(sin(u_time*3.)+1.)/8., 8., 2.,stm.x*-1., stm.y);
diff --git a/template.frag b/template.frag
index e947173..430b9c0 100644
--- a/template.frag
+++ b/template.frag
@@ -8,6 +8,8 @@ uniform float u_time;
 
 #define PI 3.14159265359
 
+
+
 void main() {
   vec2 st = gl_FragCoord.xy/u_resolution;
   vec3 color = vec3(0.0,0.0,0.0);