taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New SVG folder for animated images

stable
Xavier Julián 2014-09-24 16:08:08 +02:00
parent 695acf2c15
commit c1d92e9e43
4 changed files with 286 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/svg/logo-optimized.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

147
app/svg/logo.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

82
app/svg/spinner.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

9
gulpfile.coffee
View File

@ -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",