(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)