Skip to content

Instantly share code, notes, and snippets.

@kirjavascript
Last active Dec 22, 2015
Embed
What would you like to do?
Fractals
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head><title>fractal</title></head>
<style>
svg{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}
</style>
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
/*
created by snkenjoi/kirjava/colourful/cake
*/
_='f   }f   };.Elem;self.inner.clidocumHeightWidth ;&& unction get (){)return .bodyif(ent';for(Y in $=' ')with(_.split($[Y]))_=join(pop());eval(_)
// config array for width/height/margin
var c = {
w: getWidth(),
h: getHeight(),
m: 100
}
// setup svg and set viewbox based on w/h/margins
var svg = d3.select("body").append("svg")
.attr("width",c.w).attr("height",c.h)
.attr("viewBox", [-c.m,-c.m,c.w+(c.m*2),c.h+(c.m*2)].join(" "));
var line = d3.svg.line()
.x(d => d.bacon )
.y(d => d.y )
.interpolate("linear")
function w(g,x,y,x1,y1) {
g.append("path")
.attr("class", "line")
.attr("d", line([{"bacon":x,"y":y},
{"bacon":x1,"y":y1}]))
.attr("stroke", '#000')
.attr("fill", "none")
.attr("stroke-width", 2)
}
// scale at speed
var i=x=y=0;
setInterval(() => {
var g = svg.append("g");
if(++i%2==0) {
for(var $=0;$<i/2;$++) {
w(g, x-($*10),y+($*10),(x-($*10))+10,(y+($*10))+10);
}
}
else {
for(var $=0;$<(i-1)/2;$++) {
w(g, x-5-($*10),y+($*10),(x-($*10))+15,(y+($*10))+10);
w(g, x-5-($*10),y+($*10),(x-($*10))+5,(y+($*10))+20);
}
}
d3.select("svg").attr("viewBox", [i*5.2,0,(i*10),(i*10)].join(" "));
x+=15;
y+=10;
},100)
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment