From c1d92e9e435c324ca6ec73e48fa790794c64b9fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 24 Sep 2014 16:08:08 +0200
Subject: [PATCH] New SVG folder for animated images

---
 app/svg/logo-optimized.svg |  48 ++++++++++++
 app/svg/logo.svg           | 147 +++++++++++++++++++++++++++++++++++++
 app/svg/spinner.svg        |  82 +++++++++++++++++++++
 gulpfile.coffee            |   9 +++
 4 files changed, 286 insertions(+)
 create mode 100644 app/svg/logo-optimized.svg
 create mode 100644 app/svg/logo.svg
 create mode 100644 app/svg/spinner.svg

diff --git a/app/svg/logo-optimized.svg b/app/svg/logo-optimized.svg
new file mode 100644
index 00000000..563da6aa
--- /dev/null
+++ b/app/svg/logo-optimized.svg
@@ -0,0 +1,48 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg4647" version="1.1" viewBox=".." preserveAspectRatio="xMidYMid meet">
+  <defs id="defs4649"/>
+  <metadata id="metadata4652"/>
+  <style>
+      .top {
+          transform-origin: 193px 164px;
+          -webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+          -webkit-transform-origin: 50% 50%;
+          animation: rotate 6s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+      }
+      .top rect {
+          fill-opacity: 1;
+          fill: #fff;
+          opacity: .6
+      }
+      @-webkit-keyframes rotate {
+          50% {
+              -webkit-transform: rotate(360deg);
+          }
+      }
+      @keyframes rotate {
+          50% {
+              transform: rotate(360deg);
+          }
+      }
+  </style>
+  <g id="layer1" transform="translate(-307.87667,-465.22863)">
+    <g transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)" id="layer1-1" display="inline">
+      <g transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)" id="g6368" display="inline">
+        <g id="g6358" transform="translate(-905.09668,1190.7678)">
+          <g class="bottom">
+              <rect transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)" y="453.99191" x="19.390564" height="263.03665" width="263.03665" id="rect6306" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
+              <rect transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)" y="-980.32068" x="-545.35144" height="263.03665" width="263.03665" id="rect6298" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
+              <rect transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)" y="239.36371" x="-1091.8109" height="263.03665" width="263.03665" id="rect6290" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
+              <rect transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)" y="-765.04388" x="565.75031" height="263.03665" width="263.03665" id="rect6302" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
+          </g>
+          <g class="top">
+              <rect id="rect6300" width="263.03665" height="263.03665" x="123.24944" y="-1124.9786" transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
+              <rect id="rect6304" width="263.03665" height="263.03665" x="522.39832" y="-110.13736" transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
+              <rect id="rect6288" width="263.03665" height="263.03665" x="-649.58295" y="599.28192" transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
+              <rect id="rect6296" width="263.03665" height="263.03665" x="-1048.9221" y="-415.20911" transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
+          </g>
+        </g>
+        <rect id="rect6286" width="141.42136" height="141.42136" x="-130.17999" y="2210.6592" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" style="fill-opacity:1;fill:#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/app/svg/logo.svg b/app/svg/logo.svg
new file mode 100644
index 00000000..cc0be845
--- /dev/null
+++ b/app/svg/logo.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+     xmlns:dc="http://purl.org/dc/elements/1.1/"
+     xmlns:cc="http://creativecommons.org/ns#"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+     width="134.24667"
+     height="134.26709"
+     id="svg4647"
+     version="1.1"
+     inkscape:version="0.48.5 r10040"
+     sodipodi:docname="New document 13">
+    <defs
+         id="defs4649" />
+    <sodipodi:namedview
+         id="base"
+         pagecolor="#ffffff"
+         bordercolor="#666666"
+         borderopacity="1.0"
+         inkscape:pageopacity="0.0"
+         inkscape:pageshadow="2"
+         inkscape:zoom="0.35"
+         inkscape:cx="67.123334"
+         inkscape:cy="67.133542"
+         inkscape:document-units="px"
+         inkscape:current-layer="layer1"
+         showgrid="false"
+         fit-margin-top="0"
+         fit-margin-left="0"
+         fit-margin-right="0"
+         fit-margin-bottom="0"
+         inkscape:window-width="501"
+         inkscape:window-height="456"
+         inkscape:window-x="1920"
+         inkscape:window-y="590"
+         inkscape:window-maximized="0" />
+    <metadata
+         id="metadata4652">
+        <rdf:RDF>
+            <cc:Work
+                 rdf:about="">
+                <dc:format>image/svg+xml</dc:format>
+                <dc:type
+                     rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+                <dc:title></dc:title>
+            </cc:Work>
+        </rdf:RDF>
+    </metadata>
+    <g
+         inkscape:label="Layer 1"
+         inkscape:groupmode="layer"
+         id="layer1"
+         transform="translate(-307.87667,-465.22863)">
+        <g
+             style="display:inline"
+             transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)"
+             id="layer1-1"
+             inkscape:label="Capa 1">
+            <g
+                 transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)"
+                 id="g6368"
+                 style="display:inline">
+                <g
+                     id="g6358"
+                     transform="translate(-905.09668,1190.7678)">
+                    <rect
+                         transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)"
+                         y="453.99191"
+                         x="19.390564"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6306"
+                         style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)"
+                         y="-980.32068"
+                         x="-545.35144"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6298"
+                         style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)"
+                         y="239.36371"
+                         x="-1091.8109"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6290"
+                         style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)"
+                         y="-765.04388"
+                         x="565.75031"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6302"
+                         style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6300"
+                         width="263.03665"
+                         height="263.03665"
+                         x="123.24944"
+                         y="-1124.9786"
+                         transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
+                    <rect
+                         style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6304"
+                         width="263.03665"
+                         height="263.03665"
+                         x="522.39832"
+                         y="-110.13736"
+                         transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
+                    <rect
+                         style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6288"
+                         width="263.03665"
+                         height="263.03665"
+                         x="-649.58295"
+                         y="599.28192"
+                         transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
+                    <rect
+                         style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6296"
+                         width="263.03665"
+                         height="263.03665"
+                         x="-1048.9221"
+                         y="-415.20911"
+                         transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
+                </g>
+                <rect
+                     style="fill:#ffffff;fill-opacity:1;stroke:none"
+                     id="rect6286"
+                     width="141.42136"
+                     height="141.42136"
+                     x="-130.17999"
+                     y="2210.6592"
+                     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/app/svg/spinner.svg b/app/svg/spinner.svg
new file mode 100644
index 00000000..dd74f589
--- /dev/null
+++ b/app/svg/spinner.svg
@@ -0,0 +1,82 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg4647" version="1.1" viewBox=".." preserveAspectRatio="xMidYMid meet">
+  <defs id="defs4649"/>
+  <metadata id="metadata4652"/>
+  <style>
+      .top {
+          transform-origin: 193px 164px;
+          -webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+          -webkit-transform-origin: 50% 50%;
+          animation: rotate 6s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+      }
+      .bottom rect {
+          fill-opacity: 1;
+          fill: #9dce0a;
+          opacity: .2;
+      }
+      .top rect {
+          fill-opacity: 1;
+          fill: #9dce0a;
+          opacity: .6;
+          animation: colorize 10s linear infinite alternate;
+          -webkit-animation: colorize 10s linear infinite alternate;
+      }
+      .braktearo {
+          fill-opacity: 1;
+          fill: #9dce0a;
+          opacity: .9;
+      }
+      @-webkit-keyframes rotate {
+          50% {
+              -webkit-transform: rotate(360deg);
+          }
+      }
+      @keyframes rotate {
+          50% {
+              transform: rotate(360deg);
+          }
+      }
+      @-webkit-keyframes colorize {
+          0% {
+              opacity: .6;
+          }
+          60% {
+              opacity: .0;
+          }
+          80% {
+              opacity: .6;
+          }
+      }
+      @keyframes colorize {
+          0% {
+              opacity: .6;
+          }
+          60% {
+              opacity: .0;
+          }
+          80% {
+              opacity: .6;
+          }
+      }
+  </style>
+  <g id="layer1" transform="translate(-307.87667,-465.22863)">
+    <g transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)" id="layer1-1" display="inline">
+      <g transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)" id="g6368" display="inline">
+        <g id="g6358" transform="translate(-905.09668,1190.7678)">
+          <g class="bottom">
+              <rect transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)" y="453.99191" x="19.390564" height="263.03665" width="263.03665" id="rect6306" />
+              <rect transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)" y="-980.32068" x="-545.35144" height="263.03665" width="263.03665" id="rect6298" />
+              <rect transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)" y="239.36371" x="-1091.8109" height="263.03665" width="263.03665" id="rect6290" />
+              <rect transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)" y="-765.04388" x="565.75031" height="263.03665" width="263.03665" id="rect6302" />
+          </g>
+          <g class="top">
+              <rect id="rect6300" width="263.03665" height="263.03665" x="123.24944" y="-1124.9786" transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
+              <rect id="rect6304" width="263.03665" height="263.03665" x="522.39832" y="-110.13736" transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
+              <rect id="rect6288" width="263.03665" height="263.03665" x="-649.58295" y="599.28192" transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
+              <rect id="rect6296" width="263.03665" height="263.03665" x="-1048.9221" y="-415.20911" transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
+          </g>
+        </g>
+        <rect class="braktearo" id="rect6286" width="141.42136" height="141.42136" x="-130.17999" y="2210.6592" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/gulpfile.coffee b/gulpfile.coffee
index b51f0dcc..e96fda5d 100644
--- a/gulpfile.coffee
+++ b/gulpfile.coffee
@@ -34,6 +34,7 @@ paths = {
     sassStylesMain: "app/styles/main.scss"
     css:  "app/styles/vendor/*.css"
     images: "app/images/**/*"
+    svg: "app/svg/**/*"
     locales: "app/locales/**/*.json"
     coffee: ["app/coffee/app.coffee",
              "app/config/*.coffee",
@@ -200,6 +201,11 @@ gulp.task "jslibs-deploy", ->
 # Common tasks
 ##############################################################################
 
+# SVG
+gulp.task "svg",  ->
+    gulp.src("#{paths.app}/svg/**/*")
+        .pipe(gulp.dest("#{paths.dist}/svg/"))
+
 # Copy Files
 gulp.task "copy",  ->
     gulp.src("#{paths.app}/fonts/*")
@@ -219,6 +225,7 @@ gulp.task "express", ->
     app.use("/js", express.static("#{__dirname}/dist/js"))
     app.use("/styles", express.static("#{__dirname}/dist/styles"))
     app.use("/images", express.static("#{__dirname}/dist/images"))
+    app.use("/svg", express.static("#{__dirname}/dist/svg"))
     app.use("/partials", express.static("#{__dirname}/dist/partials"))
     app.use("/fonts", express.static("#{__dirname}/dist/fonts"))
     app.use("/plugins", express.static("#{__dirname}/dist/plugins"))
@@ -234,6 +241,7 @@ gulp.task "watch", ->
     gulp.watch(paths.jade, ["jade-watch"])
     gulp.watch("#{paths.app}/index.jade", ["template"])
     gulp.watch(paths.scssStyles, ["styles-watch"])
+    gulp.watch(paths.svg, ["svg"])
     gulp.watch(paths.coffee, ["coffee-watch"])
     gulp.watch(paths.vendorJsLibs, ["jslibs-watch"])
     gulp.watch(paths.locales, ["coffee-watch"])
@@ -252,6 +260,7 @@ gulp.task "default", [
     "jade-deploy",
     "template",
     "styles-watch",
+    "svg",
     "copy",
     "coffee-watch",
     "jslibs-watch",