   (restore!)
   )
 
-(defn draw-js!
-  [{:keys [x y r alpha]}]
-
+(defn draw-js-face!
+  [{:keys [x y r angle alpha]}]
   (save!)
   (global-alpha! alpha)
-  (circle! x y r)
+  (translate! x y)
+  (rotate! angle)
+  (circle! 0 0 r)
   (fill-style! "#f7df1e")
   (fill!)
 

  []
  (go
    (<! (multi-animate!
          [{:a 0 :b 1 :duration 1}
           #(swap! state assoc-in [:js-face :alpha] %)
           {:a 900 :b 0 :duration 1}
           #(swap! state assoc-in [:js-face :x] %)
           {:a 1 :b 0 :duration 0.4}
           #(swap! state assoc-in [:title :alpha] %)
           ]))))

;;--------------------------------------------------------------------------------
;; Slide Control

  (text-baseline! "middle")
  (fill-style! "#222")
  (let [off 60]
    (fill-text! "JS" off off))

  (restore!))

(defn draw-js-core!
  [{:keys [x y r alpha]}]
  (save!)
  (global-alpha! alpha)
  (stroke-style! "#222")
  (doseq [[i label] (reverse (map-indexed vector ["ES3" "ES5" "ES6" "ES7" "ES8"]))]
    (let [cr (* (inc i) (/ r 5))]
      (circle! x y cr)
      (line-width! 10)
      (stroke!)
      (fill-style! "#f7df1e")
      (fill!)))
  (restore!)
  )


;;--------------------------------------------------------------------------------
;; Drawing
