Skip to content

Instantly share code, notes, and snippets.

Created February 7, 2014 16:45
Show Gist options
  • Save anonymous/8866577 to your computer and use it in GitHub Desktop.
Save anonymous/8866577 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg>
<circle class="change-me" fill="url(#pattr-0)" cx=0 cy=0 r="100" />
<circle class="change-me" fill="#ff5500" cx=150 cy=80 r="40" />
<pattern id='pattr-0' width="1.0" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<image xlink:href='http://s8.postimg.org/6avcdxa6p/stars.png' width="100" height="100" preserveAspectRatio="none"></image>
</pattern>
<pattern id='pattr-1' width="1.0" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<image xlink:href='http://s13.postimg.org/4jml7dszb/thunder.png' width="100" height="100" preserveAspectRatio="none"></image>
</pattern>
</svg>
</body>
</html>
function changeImages()
{
$(".change-me").each(
function( index ) {
$( this ).attr( "fill", "url(#pattr-" + Math.round(Math.random()) + ")"
);
});
}
$( document ).ready( changeImages );
@pixelpusher
Copy link

This is to select a random image pattern fill for svgs on load

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment