xav76’s gists

xav76 / index.html

Created October 24, 2012 17:04

A CodePen by Hakim El Hattab. Linjer - Visual/interactive experiment on canvas.

	<p class="instructions">
	<em>Click and drag</em> to add nodes.  <em>Space</em> to reset.  <em>Style</em>:
	<select class="styles">
	<option value="diagonal">Diagonal</option>
	<option value="circle">Circle</option>
	<option value="grid">Grid</option>
	<option value="cross">Cross</option>
	<option value="none">None</option>
	</select>
	</p>

xav76 / index.html

Created October 24, 2012 17:03

A CodePen by Dan Gries. Randomized Fractal Gradient Texture in Canvas - Gradients with many color stops defined by a fractal subdivision process are layered on top of each other to produce some interesting textures. More notes on the code at http://rectan

	<div id="container">
	<canvas id="displayCanvas" width="900px" height="320px">
	Your browser does not support HTML5 canvas.
	</canvas>
	<p id="caption">
	HTML5 Canvas: Layered Fractal Gradient. (Click on the image to regenerate.)    <a href="http://www.rectangleworld.com">rectangleworld.com</a>
	</p>
	</div>

xav76 / index.html

Created October 24, 2012 16:59

A CodePen by Bennett Feely. Glass Filter

	<figure id="window">
	<img src="http://wikitravel.org/upload/shared//6/60/Pittsburgh_skyline_view.jpg" />
	<div id="filter"></div>
	</figure>
	<a href="https://twitter.com/bennettfeely">@bennettfeely</a>

xav76 / index.html

Created October 24, 2012 16:59

A CodePen by Niels Oeltjen. Large menu pattern - Simple responsive menu pattern for sites with TONS of links in nav

	<div class="menu-open menu-button"><a href="#">Menu</a></div>

	<div id="menu">

	<div class="menu-close menu-button"><a href="#">Close</a></div>

	<div id="menu-inner">

	<div id="menu-filter"><input type="search" placeholder="filter"></div>

xav76 / index.html

Created October 24, 2012 16:51

A CodePen by Aurélien Lemesre. CSS RAIN - Some rain drops generated in JS through some random values (left and top position). Those drops are then animated in CSS from top to bottom (simple infinite animation).

xav76 / script.js

Created October 24, 2012 16:51

A CodePen by Jack Rugile. Canvas Shaky Point Grid

	var c = document.createElement('canvas');
	var ctx = c.getContext('2d');
	var cw = c.width = window.innerWidth;
	var ch = c.height = window.innerHeight;
	document.body.appendChild(c);

	var rand = function(a,b){return ~~((Math.random()*(b-a+1))+a);}
	var mx = cw/2;
	var my = ch/2;
	var spacing = 35;

xav76 / index.html

Created October 24, 2012 16:50

A CodePen by Marek Bielańczuk. Maze Generator - Using Prim's algorithm where weight of adjacent edges is set with random numbers.

	<div id="panel">
	<div id="right">
	<div id="caption">
	Maze generator
	</div>
	<div id="desc">
	Using Prim's algorithm where weight of adjacent edges is set with random numbers.
	</div>
	<div id="buttons">
	<a class="button disable" id="btStart" href="javascript://">Start</a>

xav76 / index.html

Created October 24, 2012 16:49

A CodePen by Denys Mishunov. Genie-like list items animation

	<div id="wrapper">

	<ul id="drops-wrapper">
	<li><a href="#" class="toggle" data-genie-target="#target">Click me 1</a></li>
	<li><a href="#" class="toggle" data-genie-target="#target">Click me 2</a></li>
	<li><a href="#" class="toggle" data-genie-target="#target">Click me 3</a></li>
	<li><a href="#" class="toggle" data-genie-target="#target">Click me 4</a></li>
	<li><a href="#" class="toggle" data-genie-target="#target">Click me 5</a></li>
	</ul>

xav76 / index.html

Created October 24, 2012 16:49

A CodePen by Mohamed Moustafa. CSS Hidden Navigation - An experiment, powered by a hidden resizable textarea.

	<h1>Try to Pull the Arrow <span class="me">Down</span></h1>

	<div class="wrapper wbot">
	<div class="content">
	<ul>
	<li><a href="#">Cool, HUH</a></li>
	<li><a href="#">Try to</a></li>
	<li><a href="#">Pull the</a></li>
	<li><a href="#">Arrow Up</a></li>
	<li><a href="http://codepen.io/mmoustafa" target="_blank" class="me">mmoustafa</a></li>

xav76 / index.html

Created October 24, 2012 16:48

A CodePen by simurai. Animated Radio Inputs - The bi-directional animation is done by using ~ sibling selectors. ps. WebKit only -> uses appearance:none; Cross-Browser version by @ryanseddon: http://jsfiddle.net/ryanseddon/FeJT2/

	<input type="radio" name="name" checked />
	<input type="radio" name="name" />
	<input type="radio" name="name" />
	<input type="radio" name="name" />
	<input type="radio" name="name" />