Last active
December 27, 2015 11:29
-
-
Save zbryikt/7319311 to your computer and use it in GitHub Desktop.
write svg with jade, sass, livescript!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: optima; } | |
| iframe { | |
| border: none; } | |
| .ib { | |
| display: inline-block; | |
| text-align: center; | |
| border: 1px solid #cccccc; | |
| margin: 20px; } | |
| @-webkit-keyframes rainbow { | |
| 0% { | |
| fill: red; } | |
| 25% { | |
| fill: lime; } | |
| 50% { | |
| fill: blue; } | |
| 75% { | |
| fill: lime; } | |
| 100% { | |
| fill: red; } } | |
| #rect { | |
| -webkit-animation-name: rainbow; | |
| -webkit-animation-duration: 3s; | |
| -webkit-animation-iteration-count: infinite; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="index.css"></head><body><h3>Embed Self-Animated SVG </h3><div class="ib"><div class="title">use img tag</div><img src="index.svg"></div><div class="ib"><div class="title">use iframe tag</div><iframe src="index.svg"></iframe></div><div class="ib"><div class="title">use object tag</div><object type="image/svg+xml" data="index.svg"></object></div></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !!!5 | |
| html | |
| head | |
| meta(charset="utf-8") | |
| link(rel="stylesheet",type="text/css",href="index.css") | |
| body | |
| h3 Embed Self-Animated SVG | |
| .ib | |
| .title use img tag | |
| img(src="index.svg") | |
| .ib | |
| .title use iframe tag | |
| iframe(src="index.svg") | |
| .ib | |
| .title use object tag | |
| object(type="image/svg+xml",data="index.svg") | |
| br | |
| | or | |
| a(href="index.svg") check the svg file directly |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated by LiveScript 1.2.0 | |
| $('#blah').animate({ | |
| transform: "translate(10 10)" | |
| }); | |
| setInterval(function(){ | |
| return $('#text').text(parseInt(Math.random() * 10)); | |
| }, 100); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #alert \ok | |
| $ \#blah .animate transform: "translate(10 10)" | |
| setInterval -> | |
| $ \#text .text parseInt(Math.random!*10) | |
| ,100 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| font-family: optima | |
| iframe | |
| border: none | |
| .ib | |
| display: inline-block | |
| text-align: center | |
| border: 1px solid #ccc | |
| margin: 20px | |
| @-webkit-keyframes rainbow | |
| 0% | |
| fill: #f00 | |
| 25% | |
| fill: #0f0 | |
| 50% | |
| fill: #00f | |
| 75% | |
| fill: #0f0 | |
| 100% | |
| fill: #f00 | |
| #rect | |
| -webkit-animation-name: rainbow | |
| -webkit-animation-duration: 3s | |
| -webkit-animation-iteration-count: infinite |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !!!xml | |
| svg(version="1.1",xmlns="http://www.w3.org/2000/svg",xmlns:xlink="http://www.w3.org/1999/xlink",width="144px",height="144px",viewBox="0 0 1440 1440") | |
| style(type="text/css") @import url(index.css) | |
| script(type="text/javascript",xlink:href="http://codeorigin.jquery.com/jquery-1.10.2.min.js") | |
| script(type="text/javascript",xlink:href="index.js") | |
| path#rect(d="M1168.981,768.024c0.008-1.008,0.019-2.014,0.019-3.024c0-198.823-161.177-360-360-360c-92.053,0-176.032,34.554-239.686,91.393C560.008,495.477,550.563,495,541,495c-149.117,0-270,114.167-270,255c0,6.03,0.238,12.006,0.674,17.932C169.444,781.873,90,870.103,90,976v30c0,115.5,94.5,210,210,210h840c115.5,0,210-94.5,210-210v-30C1350,870.329,1270.895,782.252,1168.981,768.024z") | |
| text#text(x="720",y="920",fill="#fff",text-anchor="middle",style="font-size:280px") X |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| all: | |
| livescript -cb index.ls | |
| sass index.sass index.css | |
| jade < index.svg.jade > index.svg | |
| jade < index.jade > index.html | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment