Skip to content

Instantly share code, notes, and snippets.

@StrikingLoo

StrikingLoo/index.html

Created October 5, 2016 01:55
Show Gist options
  • Save StrikingLoo/6ffb25651a637af2590309f18e5acd2f to your computer and use it in GitHub Desktop.
Save StrikingLoo/6ffb25651a637af2590309f18e5acd2f to your computer and use it in GitHub Desktop.
Download ZIP
It's hip to be square
Raw
index.html
<body>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
</div>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
<div class='container-fluid' align='center'>
<div class = 'row'>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100' >
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'>
<rect width = '100' height = '100'>
</rect>
</svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg>
<svg width = '100' height = '100'><rect width = '100' height = '100'></rect></svg></div>
</body>
Raw
script.js
/* event handler */
$(document).ready(function() {
$('rect').on('mouseenter',function(){ /*pretty standard*/
r = Math.floor(Math.random()*255).toString();
g = Math.floor(Math.random()*255).toString();
b = Math.floor(Math.random()*255).toString();
/*we generate three random values, assign them as parameters for the colour*/
colourshade='rgb('+r+','+g+','+b+')'
$(this).attr('fill',colourshade);
}/*thus the rectangle that triggered the event changes*/
);
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
body {background-color:black;}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment