Skip to content

Instantly share code, notes, and snippets.

@csalzman

csalzman/svg-randomize.html

Created May 22, 2012 19:12
Show Gist options
  • Save csalzman/2771026 to your computer and use it in GitHub Desktop.
Save csalzman/2771026 to your computer and use it in GitHub Desktop.
Download ZIP
Randomize the points and locations of an svg polygon
Raw
svg-randomize.html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<button id="click"/>Generate your spirit animal</button>
<p>
<svg>
<polygon id="polygon" points="200,10 250,190 160,210" fill="green" stroke="black" stroke-width="1"/>
</svg>
</p>
</body>
</body>
<script type="text/javascript">
var random_points = function() {
//randomize a number of points between 3 and 11
var points = Math.floor(Math.random()*8)+ 3;
var array = [];
//for each point, randomize a coordinate and push it into an array
for (i=0;i<=points;i++) {
var x = Math.floor(Math.random()*500);
var y = Math.floor(Math.random()*500);
var coordinate = x.toString() + ',' + y.toString();
array.push(coordinate);
}
//format it for the "points" attribute
return array.join(' ').toString();
}
//Click the button to randomize the points
$('#click').click(function() {
$('#polygon').attr('fill', 'green').attr('points', random_points);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment