Skip to content

Instantly share code, notes, and snippets.

@zbryikt

zbryikt/index.css

Last active December 27, 2015 11:29
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zbryikt/7319311 to your computer and use it in GitHub Desktop.
Save zbryikt/7319311 to your computer and use it in GitHub Desktop.
Download ZIP
write svg with jade, sass, livescript!
Raw
index.css
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; }
Raw
index.html
<!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>
Raw
index.jade
!!!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
Raw
index.js
// Generated by LiveScript 1.2.0
$('#blah').animate({
transform: "translate(10 10)"
});
setInterval(function(){
return $('#text').text(parseInt(Math.random() * 10));
}, 100);
Raw
index.ls
#alert \ok
$ \#blah .animate transform: "translate(10 10)"
setInterval ->
$ \#text .text parseInt(Math.random!*10)
,100
Raw
index.sass
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
Display the source blob
Display the rendered blob
Raw
index.svg
<?xml version="1.0" encoding="utf-8" ?><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)</style><script type="text/javascript" xlink:href="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" xlink:href="index.js"></script><path id="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"></path><text id="text" x="720" y="920" fill="#fff" text-anchor="middle" style="font-size:280px">X</text></svg>
Raw
index.svg.jade
!!!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
Raw
makefile
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