Skip to content

Instantly share code, notes, and snippets.

@alojzije

alojzije/Fractal Tree.png

Last active August 29, 2015 14:02
Show Gist options
  • Save alojzije/6c852176365b64682b14 to your computer and use it in GitHub Desktop.
Save alojzije/6c852176365b64682b14 to your computer and use it in GitHub Desktop.
Download ZIP
2 fractal trees, first static, second animated
Raw
Fractal-Tree-ReadMe.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fractal Tree SVG</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<!-- http://rosettacode.org/wiki/Fractal_tree#SVG -->
<!-- first static tree -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1000" height="320">
<defs>
<g id="stem"> <line x1="0" y1="0" x2="0" y2="-1" style="stroke-width: .05; stroke: black;"/> </g>
<g id="0"><use xlink:href="#stem"/></g>
<!-- These are identical except for the id and href. -->
<g id="1"> <use xlink:href="#0" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#0" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="2"> <use xlink:href="#1" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#1" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="3"> <use xlink:href="#2" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#2" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="4"> <use xlink:href="#3" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#3" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="5"> <use xlink:href="#4" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#4" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="6"> <use xlink:href="#5" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#5" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="7"> <use xlink:href="#6" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#6" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="8"> <use xlink:href="#7" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#7" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
<g id="9"> <use xlink:href="#8" transform="translate(0, -1) rotate(-35) scale(.7)"/>
<use xlink:href="#8" transform="translate(0, -1) rotate(+35) scale(.7)"/>
<use xlink:href="#stem"/></g>
</defs>
<g transform="translate(180, 320) scale(100)">
<use xlink:href="#9"/>
</g>
<!-- second, js animated tree -->
<g transform="translate(570, 320) scale(100)">
<use id="use" xlink:href=""/>
</g>
</svg>
<script src="script.js"> </script>
</body>
</html>
Raw
script.js
// this draws the second svg fractal tree
$(document).ready(function() {
var id = 0;
var intervalId = window.setInterval( function(){
$('#use').attr('xlink:href', '#'+ (id++))
if (id>9) clearInterval(intervalId)
}, 120);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment