looks like crayon

diff --git a/auto.coffee b/auto.coffee
index ee3d133..8a9033e 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -217,6 +217,24 @@ init = ->
        svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
        $svg = $ svg
        $container.append $svg
        svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
        $svg = $ svg
        $container.append $svg

+       filter = document.createElementNS svg_ns, 'filter'
+       filter.setAttribute 'id', 'crayon'
+       filter.setAttribute 'filterUnits', 'userSpaceOnUse'
+       filter.setAttribute 'x', '-5%'
+       filter.setAttribute 'y', '-5%'
+       filter.setAttribute 'height', '110%'
+       filter.setAttribute 'width', '110%'
+       filter_inner = document.createElementNS svg_ns, 'feTurbulence'
+       filter_inner.setAttribute 'baseFrequency', '.3'
+       filter_inner.setAttribute 'numOctaves', '2'
+       filter_inner.setAttribute 'type', 'fractalNoise'
+       filter.appendChild filter_inner
+       filter_inner = document.createElementNS svg_ns, 'feDisplacementMap'
+       filter_inner.setAttribute 'scale', '6'
+       filter_inner.setAttribute 'xChannelSelector', 'R'
+       filter_inner.setAttribute 'in', 'SourceGraphic'
+       filter.appendChild filter_inner
+       svg.appendChild filter

 
        tool_buttons =
                tutorial: default: true, factory: TutorialTool
 
        tool_buttons =
                tutorial: default: true, factory: TutorialTool

diff --git a/styl.styl b/styl.styl
index c5b6d5c..367744b 100644 (file)
--- a/styl.styl
+++ b/styl.styl
@@ -6,14 +6,15 @@
        svg path
                fill: none
                stroke: #8c8c8c
        svg path
                fill: none
                stroke: #8c8c8c

-               stroke-width: 3
+               stroke-width: 5

                stroke-linecap: butt
                stroke-linejoin: round
                stroke-miterlimit: 4
                stroke-opacity: 1
                stroke-dasharray: none
                stroke-linecap: butt
                stroke-linejoin: round
                stroke-miterlimit: 4
                stroke-opacity: 1
                stroke-dasharray: none

+               filter: url(#crayon)

                /.crayon_mockup.delete_tool svg path:hover
                /.crayon_mockup.delete_tool svg path:hover

-                       stroke-width: 5
+                       stroke-width: 7

                        stroke: #f00
        .button
                display: inline-block
                        stroke: #f00
        .button
                display: inline-block