kizu

/**
 * Pooparty - view in Chrome for the full effect
 */

@keyframes poop-dance {
	from, 49% { transform-origin: -50% 100%; }
	50%, 75%, to { transform-origin: 150% 100%; }
	25% { transform: rotate(-10deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(10deg); }

kizu

.popup {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 150px;
	height: 200px;
	border: 1px solid #000;
	overflow: hidden;
}

kizu

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="120">
	<defs>
  		<pattern id="pattern1" width="20" height="20" patternUnits="userSpaceOnUse" viewBox="9 9 20 20">
			<path fill="#444444" d="M25.7,24.4c-0.8-0.2-2.1-0.3-2.6-0.6c-0.4-0.1-1.1-0.3-1.3-0.6c-0.2-0.2-0.2-2-0.2-2s0.5-0.4,0.7-1 c0.2-0.6,0.4-1.9,0.4-1.9s0,0,0.1,0c0.1,0,0.5-0.1,0.6-0.8c0.1-0.8,0.5-1.2,0.4-1.8c0-0.2-0.2-0.2-0.4-0.2h-0.1c0,0,0.5-0.6,0.5-2.6 S22,9.1,19,9c-3,0-4.6,2-4.6,4.1c-0.1,1.9,0.4,2.6,0.4,2.6s0,0-0.1,0s-0.2,0-0.4,0.4c0,0.6,0.2,1,0.5,1.8c0.1,0.7,0.4,0.8,0.6,0.8 c0.1,0,0.1,0,0.1,0s0.1,1.3,0.4,1.9c0.3,0.6,0.7,1,0.7,1s0,1.7-0.2,2c-0.2,0.2-0.8,0.4-1.3,0.6c-0.6,0.2-1.8,0.3-2.6,0.6 C11.6,25,9,25.9,9,29h20C29,25.9,26.5,24.8,25.7,24.4z"/>
   		</pattern>
	</defs>
    <rect width="120" height="120" style="stroke: #000000; fill: url(#pattern1);" />
</svg>

<svg viewbox="0 0 40 40" width="40" height="40" style="background:red">

kizu

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="120">
	<defs>
  		<pattern id="pattern1" width="20" height="20" patternUnits="userSpaceOnUse" viewBox="0 0 40 40">
			<path d="M33.4 30.8c-1.6-.4-4.2-.6-5.2-1.2-.8-.2-2.2-.6-2.6-1.2-.4-.4-.4-4-.4-4s1-.8 1.4-2c.4-1.2.8-3.8.8-3.8h.2c.2 0 1-.2 1.2-1.6.2-1.6 1-2.4.8-3.6 0-.4-.4-.4-.8-.4h-.2s1-1.2 1-5.2-3.6-7.6-9.6-7.8c-6 0-9.2 4-9.2 8.2-.2 3.8.8 5.2.8 5.2h-.2c-.2 0-.4 0-.8.8 0 1.2.4 2 1 3.6.2 1.4.8 1.6 1.2 1.6h.2s.2 2.6.8 3.8c.6 1.2 1.4 2 1.4 2s0 3.4-.4 4c-.4.4-1.6.8-2.6 1.2-1.2.4-3.6.6-5.2 1.2-1.8.4-7 2.2-7 8.4h40c0-6.2-5-8.4-6.6-9.2z" fill="#444"/>
   		</pattern>
	</defs>
    <rect width="120" height="120" style="stroke: #000000; fill: url(#pattern1);" />
</svg>
<br/>
<svg width="20" height="20" viewBox="0 0 40 40">

kizu

/**
 * Align
 */

flex {
	display: flex;
	align-items: baseline;
}
div {
	width: 5em;

kizu

/**
 * Bordered Arrow
 */
body {
min-height: 100%;
font-size: 10px;
//background: lime;
}

.arrow {

kizu

.image-container
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50%;
  background: lightyellow;
  overflow: hidden;
  text-align: center;

kizu

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

kizu

.cont {
	width: 100%;
	
	overflow: hidden;
	position: relative;
	white-space: nowrap;
}

.p1, .p2 {
	padding: 20px;

kizu

/**
 * Just for fun™: Flickr spinner in pure CSS
 * Now, with wider browser support!
 */

@keyframes move-right {
	to { right: 0; }
}

@keyframes move-padding {