Skip to content

Instantly share code, notes, and snippets.

@thegeez
Created February 19, 2017 14:59
Show Gist options
  • Save thegeez/d930a7d15fc166a904edeb7e816f96f5 to your computer and use it in GitHub Desktop.
Save thegeez/d930a7d15fc166a904edeb7e816f96f5 to your computer and use it in GitHub Desktop.
(ns crepl.svg.smiley
(:require [reagent.core :as r]
crepl.atom-sync))
(def happiness (crepl.atom-sync/atom-sync 30))
(defn smiley []
[:svg {:x 0 :y 0 :width 100 :height 100}
[:rect {:x 50 :y 50 :width 10 :height 10}]
[:circle {:cx 50 :cy 50 :r 40 :fill
(cond
(< @happiness -10)
"red"
(< @happiness 10)
"orange"
:else
"yellow")}]
[:circle {:cx 35 :cy 35 :r 5 :fill "black"}]
[:circle {:cx 65 :cy 35 :r 5 :fill "black"}]
[:path {:d (str "M 30 63 q 20 " @happiness " 40 0")
:stroke "black"
:stroke-width 5
:fill "none"}]
])
(defn slider []
[:input {:type "range" :default-value @happiness :min -30 :max 30
:style {:width "100%"}
:on-change (fn [e]
(reset! happiness
(int (.-target.value e))))}])
(defn svg-component []
[:div
[smiley]
[slider]])
(r/render-component [svg-component]
(.getElementById js/document "app"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment