(require '[reagent.core :as r])

(defn concentric-circles []
  [:svg {:style {:border "1px solid"
                 :background "white"
                 :width "150px"
                 :height "150px"}}
   [:circle {:r 50, :cx 75, :cy 75, :fill "green"}]
   [:circle {:r 25, :cx 75, :cy 75, :fill "blue"}]
   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 30,40 C 100,40 50,110 120,110"}]
   [:line {:stroke-width 12
           :stroke "white"
           :fill "none"
           :x1 "75" :y1 "65"
           :x2 "10" :y2 "150"}]])

(defn centered-circle []
  [:svg {:style {:border "1px solid"
                 :background "black"
                 :width "100%"
                 :height "100%"}}
   (for [x (range 2) y (range 2)]
   		[:circle {:r 300 
                  :cx (str (if (> (rand) 0.5) (+ 50 x) (- 50 x)) "%") 
                  :cy (str (if (> (rand) 0.5) (+ 50 y) (- 50 y)) "%")
                  :stroke "rgba(255,0,0,0.3)" 
                  :fill "none"}])])

(r/render-component centered-circle js/output)