diff --git a/examples/geometry/Makefile b/examples/geometry/Makefile
new file mode 100644
index 0000000..9495bda
--- /dev/null
+++ b/examples/geometry/Makefile
@@ -0,0 +1,20 @@
+
+PROF = dev
+# PROF = dev,test,srcmap
+# PROF = prod,test
+# PROF = prod
+
+CLJSBUILD = client
+
+all: autocompile
+
+run: openbrowser autocompile
+
+openbrowser:
+ (sleep 1 && open example.html) &
+
+autocompile:
+ lein with-profile $(PROF) cljsbuild auto $(CLJSBUILD)
+
+clean:
+ lein -o clean
diff --git a/examples/geometry/example.css b/examples/geometry/example.css
new file mode 100644
index 0000000..e271a16
--- /dev/null
+++ b/examples/geometry/example.css
@@ -0,0 +1,22 @@
+
+div, h1, input {
+ font-family: HelveticaNeue, Helvetica;
+ color: #777;
+}
+
+.example-clock {
+ font-size: 128px;
+ line-height: 1.2em;
+ font-family: HelveticaNeue-UltraLight, Helvetica;
+}
+
+@media (max-width: 768px) {
+ .example-clock {
+ font-size: 64px;
+ }
+}
+
+.color-input, .color-input input {
+ font-size: 24px;
+ line-height: 1.5em;
+}
diff --git a/examples/geometry/example.html b/examples/geometry/example.html
new file mode 100644
index 0000000..54b9eba
--- /dev/null
+++ b/examples/geometry/example.html
@@ -0,0 +1,15 @@
+
+
+
+
+ reagent simple example
+
+
+
+
+
+
+
+
diff --git a/examples/geometry/project.clj b/examples/geometry/project.clj
new file mode 100644
index 0000000..3e65fd0
--- /dev/null
+++ b/examples/geometry/project.clj
@@ -0,0 +1,28 @@
+
+
+(defproject geometry-reagent "0.1.0"
+ :dependencies [[org.clojure/clojure "1.5.1"]
+ [org.clojure/clojurescript "0.0-2138"]
+ [reagent "0.4.0-SNAPSHOT"]]
+ :plugins [[lein-cljsbuild "1.0.1"]]
+ :hooks [leiningen.cljsbuild]
+ :profiles {:prod {:cljsbuild
+ {:builds
+ {:client {:compiler
+ {:optimizations :advanced
+ :preamble ^:replace ["reagent/react.min.js"]
+ :pretty-print false}}}}}
+ :srcmap {:cljsbuild
+ {:builds
+ {:client {:compiler
+ {:source-map "target/client.js.map"
+ :source-map-path "client"}}}}}}
+ :source-paths ["src"]
+ :cljsbuild
+ {:builds
+ {:client {:source-paths ["src"]
+ :compiler
+ {:preamble ["reagent/react.js"]
+ :output-dir "target/client"
+ :output-to "target/client.js"
+ :pretty-print true}}}})
diff --git a/examples/geometry/src/components.cljs b/examples/geometry/src/components.cljs
new file mode 100644
index 0000000..c54e0bd
--- /dev/null
+++ b/examples/geometry/src/components.cljs
@@ -0,0 +1,48 @@
+(ns components
+ (:require [reagent.core :as r]
+ [geometry :refer [x y] :as g]))
+
+(def point-defaults
+ {:stroke "black"
+ :stroke-width 2
+ :fill "blue"
+ :r 5})
+
+(def line-defaults
+ {:stroke "black"
+ :stroke-width 2})
+
+(defn point [p]
+ [:circle
+ (merge point-defaults
+ {:cx (x p) :cy (y p)})])
+
+(defn drag [mouse-info p]
+ (when (:mouse-down? @mouse-info)
+ (reset! p (g/point (:x @mouse-info)
+ (:y @mouse-info)))
+ (.requestAnimationFrame
+ js/window
+ (fn []
+ (drag mouse-info p)))))
+
+(defn draggable-point [p mouse-info]
+ [:circle
+ (merge point-defaults
+ {:on-mouse-down #(do
+ (swap! mouse-info assoc :mouse-down? true)
+ (drag mouse-info p))
+ :cx (x @p)
+ :cy (y @p)})])
+
+(defn segment [from to]
+ [:line
+ (merge line-defaults
+ {:x1 (x from) :y1 (y from)
+ :x2 (x to) :y2 (y to)})])
+
+(defn triangle [a b c]
+ [:g
+ [segment a b]
+ [segment b c]
+ [segment c a]])
diff --git a/examples/geometry/src/core.cljs b/examples/geometry/src/core.cljs
new file mode 100644
index 0000000..3558e7a
--- /dev/null
+++ b/examples/geometry/src/core.cljs
@@ -0,0 +1,51 @@
+(ns core
+ (:require
+ [reagent.core :as r]
+ [components :as c]
+ [geometry :as g]))
+
+(enable-console-print!)
+
+;; "Global" mouse events
+(def mouse-info
+ (r/atom {:x 0
+ :y 0
+ :mouse-down? false}))
+
+(defn on-mouse-move [evt]
+ (swap! mouse-info assoc :x (.-clientX evt) :y (.-clientY evt)))
+
+(defn on-mouse-up [evt]
+ (swap! mouse-info assoc :mouse-down? false))
+
+(defn on-mouse-down [evt]
+ (swap! mouse-info assoc :mouse-down? true))
+
+(def p1 (r/atom (g/point 100 100)))
+(def p2 (r/atom (g/point 200 200)))
+(def p3 (r/atom (g/point 100 200)))
+
+(defn root []
+ [:g
+ [c/triangle @p1 @p2 @p3]
+ [c/draggable-point p1 mouse-info]
+ [c/draggable-point p2 mouse-info]
+ [c/draggable-point p3 mouse-info]])
+
+(defn by-id [id]
+ (.getElementById js/document id))
+
+(defn ^:export run []
+ (r/render-component
+ [:svg {:on-mouse-down on-mouse-down
+ :on-mouse-up on-mouse-up
+ :on-mouse-move on-mouse-move
+ :width 400
+ :height 400
+ :style {:border "1px solid black"}}
+ [:text {:style {:-webkit-user-select "none"}
+ :x 20 :y 20 :font-size 20}
+ "The corners are draggable"]
+ [root]]
+ (by-id "app")))
+
diff --git a/examples/geometry/src/geometry.cljs b/examples/geometry/src/geometry.cljs
new file mode 100644
index 0000000..2956ec5
--- /dev/null
+++ b/examples/geometry/src/geometry.cljs
@@ -0,0 +1,28 @@
+(ns geometry)
+
+(defprotocol IPoint
+ (x [p])
+ (y [p]))
+
+(deftype Point [x-coord y-coord]
+ IPoint
+ (x [_] x-coord)
+ (y [_] y-coord))
+
+(defn point [x y]
+ (Point. x y))
+
+(defn addp [p1 p2]
+ (point (+ (x p1) (x p2))
+ (+ (y p1) (y p2))))
+
+(defn rand-point [xmin xmax ymin ymax]
+ (point (rand-nth (vec (range xmin xmax)))
+ (rand-nth (vec (range ymin ymax)))))
+
+(defn rand-dir []
+ (rand-point -1 2 -1 2))
+
+
+
+