Rough for CLJS

This shows some examples of using Rough-cljs with reagent, for that hand-drawn appearance for all your boxes and arrows

All the heavy lifting is done by the excellent RoughJS library

[monoid/rough-cljs "1.0.0"]

(require '[rough-cljs.core :refer [Rough]])

Canvas

SVG

Rectangle

[Rough [[:rectangle [10 10 100 100] {:fill "blue"}]]]

Line

[Rough [[:line [10 10 100 100]]]]

Circle

[Rough [[:circle [75 75 50] {:fill "green", :fillStyle "dots"}]]]

Ellipse

[Rough [[:ellipse [75 75 70 20] {:fill "red", :fillStyle "cross-hatch"}] [:ellipse [100 75 40 80] {:fill "yellow", :fillStyle "cross-hatch"}]]]

Linear Path

[Rough [[:linearPath [[0 70] [100 70] [100 75] [120 70] [100 60] [100 65] [0 65] [0 70]]]]]

Polygon

[Rough [[:polygon [[75 75] [50 50] [10 50] [40 100]] {:fill "gray", :bowing 6}]]]

Arc

[Rough [[:arc [75 75 100 75 3.141592653589793 5.026548245743669 true] {:fill "lime", :fillStyle "dots", :strokeWidth 0.8}]]]

Curve

[Rough [[:curve [[0 150] [75 0] [100 150]]]]]

Path

[Rough [[:path "M10 80 A 45 55, 0, 1, 0, 125 75 L 125 70 Z" {:fill "purple", :hachureAngle 60, :hachureGap 5}]]]