Hello github

.gitignore

@@ -0,0 +1,2 @@
+.sass-cache
+uploads/*.svg

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Max Boll
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,16 @@
+# Draw Me Like One Of Your French Girls
+
+With this tool your can upload any of your SVGs and get back a little bit of SASS which animates the SVG with a *"self-drawing"*-effect. You can adjust some settings to make the animation as you want it.
+
+## Usage
+
+* Upload your SVG
+* Adjust settings
+* Copy/Paste the SASS to your project
+* Insert your SVG inline to your HTML
+
+## Changelog / To-Do
+
+* Add support for SVGs without path/polygon/rect/text - IDs
+* Add fade in setting after the animation is done
+* ~~Upload first release to github and make it available public~~

assets/javascripts/application.coffee

@@ -0,0 +1,100 @@
+$(document).ready ->
+  app.init()
+
+  $(".demo svg path").each ->
+    $(this).css("stroke-dasharray", $(this)[0].getTotalLength())
+    $(this).css("stroke-dashoffset", $(this)[0].getTotalLength())
+
+  $("form").ajaxForm (e) ->
+    if e is "error"
+      alert "Sir... Please select your SVG first."
+    else
+      $(".result").html(e)
+      console.log e
+      # frame = $(".result")
+      # doc = frame[0].contentWindow.document;
+      # body = $('body',doc);
+      # body.html(e);
+
+      $(".result svg path, .result svg text, .result svg polygon, .result svg rect").each ->
+        $(this).css("stroke-dasharray", $(this)[0].getTotalLength() + "px")
+        $(this).css("stroke-dashoffset", $(this)[0].getTotalLength() + "px")
+        app.paths += "&nbsp;&nbsp;&#" + $(this).attr("id") + " {<br />&nbsp;&nbsp;&nbsp;&nbsp;stroke-dasharray: " + $(this)[0].getTotalLength() + "px;<br />&nbsp;&nbsp;&nbsp;&nbsp;stroke-dashoffset: " + $(this)[0].getTotalLength() + "px;<br />&nbsp;&nbsp;}<br />"
+      $("form").hide()
+      $(".result-box").fadeIn()
+      $("html,body").animate
+        scrollTop: $("#result").offset().top
+      app.update_code()
+
+
+app =
+  width: "2"
+  color: "#1abc9c"
+  duration: "5"
+  loop: true
+  rounded: "round"
+  paths: ""
+  keyframes: "<br /><br />@keyframes draw {<br />&nbsp;&nbsp;to {<br />&nbsp;&nbsp;&nbsp;&nbsp;stroke-dashoffset: 0;<br />&nbsp;&nbsp;}<br />}"
+
+  init: ->
+    @bind_events()
+
+  bind_events: ->
+    # Stroke-Width
+    $(document).on "change", ".control-width", (e) ->
+      $(".result svg path").css "stroke-width", $(this).val()
+      app.width = $(this).val()
+      $(".width-info").text(app.width)
+      app.update_code()
+
+    # Stroke-Color
+    $(document).on "change", ".control-color", (e) ->
+      $(".result svg path").css "stroke", $(this).val()
+      app.color = $(this).val()
+      $(".color-info").text(app.color)
+      app.update_code()
+
+    # Duration
+    $(document).on "change", ".control-duration", (e) ->
+      $(".result svg path").css "animation-duration",$(this).val() + "s"
+      app.duration = $(this).val()
+
+      $(".result").hide().fadeIn(1)
+
+      $(".time-info").text(app.duration + "s")
+      app.update_code()
+
+    # Loop
+    $(document).on "change", ".control-loop", (e) ->
+      if $(this).is(":checked")
+        $(".result svg path").css "animation-iteration-count", "infinite"
+        $(".result svg path").css "animation-fill-mode", "none"
+        app.loop = true
+      else
+        $(".result svg path").css "animation-iteration-count", "1"
+        $(".result svg path").css "animation-fill-mode", "forwards"
+        app.loop = false
+      $(".result").hide().fadeIn(1)
+      app.update_code()
+
+    # Rounded Lines
+    $(document).on "change", ".control-rounded", (e) ->
+      if $(this).is(":checked")
+        $(".result svg path").css "stroke-linecap", "round"
+        app.rounded = "round"
+      else
+        $(".result svg path").css "stroke-linecap", "butt"
+        app.rounded = "butt"
+      $(".result").hide().fadeIn(1)
+      app.update_code()
+
+  update_code: ->
+    animation = "&nbsp;&nbsp;animation-name: draw;<br />&nbsp;&nbsp;animation-duration: " + @duration + "s;<br />&nbsp;&nbsp;animation-timing-function: linear;"
+    if @loop
+      animation += "<br />&nbsp;&nbsp;animation-iteration-count: infinite;<br />&nbsp;&nbsp;animation-fill-mode: none;"
+    else
+      animation += "<br />&nbsp;&nbsp;animation-iteration-count: 1;<br />&nbsp;&nbsp;animation-fill-mode: forwards;"
+    $(".code").html "svg path, svg text, svg rect, svg polygon {<br />&nbsp;&nbsp;fill-opacity: 0;<br />&nbsp;&nbsp;stroke: " + @color + ";<br />&nbsp;&nbsp;stroke-width: " + @width + ";<br />&nbsp;&nbsp;stroke-linecap: " + @rounded + ";<br />" + animation + "<br />" + @paths + "}" + @keyframes
+
+
+