Skip to content

Instantly share code, notes, and snippets.

@humaan
humaan / humaan-logo-01.js
Created May 14, 2014 06:45
Humaan SVG Logo Setup
//Initialize an SVG node & add it to the DOM
var svg = $('<svg xmlns="http://www.w3.org/2000/svg" >').css({
width: '41px',
height: '41px'
});
$('#logo').append( svg );
// Initialize the Snap svg canvas using the svg DOM node (not the jquery object)
var paper = Snap( svg[0] );
@humaan
humaan / humaan-logo-02.js
Created May 14, 2014 06:54
Hover animation
$('#logo').hover(function(){
//Hover in
parts.head.animate({
path : paths.blob
}, 800, mina.elastic );
}, function(){
//Hover out
parts.head.animate({
path : paths.head
}, 800, mina.elastic );
@humaan
humaan / humaan-logo-03.js
Created May 14, 2014 06:57
Masking
//Create a circle shape on the canvas & use it to mask the head
parts.circle_mask = paper.circle(20.5, 20.5, 20.5).attr({
fill : '#fff'
});
parts.head.attr({ mask : parts.circle_mask });
@humaan
humaan / humaan-logo-00.js
Created May 14, 2014 07:05
SVG Paths
//SVG Paths
var paths = {
head : 'M10.204,17.703c0,3.872,3.093,4.925,3.093,8.899c0,2.227-0.546,3.488-0.546,3.488s0.465,1.414,3.028,2.569c2.634,1.187,4.247,0.931,4.247,0.931c0.745-1.504,1.33-4.265,3.58-4.896c2.25-0.631,2.646-0.465,4.405-0.541c0.803-0.034,0.916-0.459,0.992-0.833c0.076-0.373,0.862-4.221,0.862-4.221s1.044-0.291,1.295-0.368c0.251-0.077,0.333-0.273,0.334-0.525c0.001-0.252-0.063-0.454-0.472-0.772c-1.092-0.849-1.711-2.328-1.711-3.735c0-1.032,0.553-2.282-0.473-4.376c-1.589-3.242-5.006-5.452-8.804-5.452C14.582,7.872,10.204,12.303,10.204,17.703z',
blob : 'M3.063,14.305C1.375,19.25,1.439,23.866,2.5,26.375s4,5.75,4,5.75s3.125,4,5.625,5.5s7,2,7,2l4.75-0.75l2.375-0.5l3.75-1.25 l2.375-1.625l2.875-3.625l2.837-4.949c0,0,1.163-2.242,1.788-4.492s0.421-3.527-0.323-6.434s-2.666-5.851-4.802-8.125 S24.298,1,20.5,1C15.047,1,4.75,9.36,3.063,14.305z',
ring : 'M20.5,3.254c9.51,0,17.246,7.737,17.246,17.246S30.01,37.746,20.5,37.746c-9.509,0-17.246-7.737-17.246-17.246 S10.991,3.254,20.5,3.254 M20.5,0C9.178,0,0,
@humaan
humaan / humaan-logo-04.js
Created May 14, 2014 07:30
Paths for Masks
//SVG Paths
var paths = {
...
//Additional paths for the masks
big_tent : 'M 17.3,27.6 23.7,27.6 20.5,22 zM0,0v41h41V0H0z M29.5,29h-18v-1.5h1.2l7.2-12.5l-1.5-2.6l0.9-0.5l1.2,2.1l1.2-2.1l0.9,0.5l-1.5,2.6l7.2,12.5h1.2V29z',
small_tent : 'M 20.1,21.3 20.9,21.3 20.5,20.7 zM0,0v41h41V0H0z M21.5,21.4h-2v-0.2h0.1l0.8-1.4l-0.2-0.3l0.1-0.1l0.1,0.2l0.1-0.2l0.1,0.1l-0.2,0.3l0.8,1.4h0.1V21.4z'
};
@humaan
humaan / humaan-logo-06.js
Created May 14, 2014 07:57
Minor Detailing
//Minor Detailing
parts.cover = paper.circle(20.5, 20.5, 3).attr({
fill : '#000',
opacity : 1
});
//Hover animations
$('#logo').hover(function(){
...
@humaan
humaan / humaan-logo-05.js
Created May 14, 2014 07:59
Extra Mask
//Create the additional mask shapes and apply to the group
parts.tent_mask = paper.path( paths.small_tent ).attr({
fill : '#fff'
});
logo_group.attr({
mask : parts.tent_mask
});
//Hover animations
$('#logo').hover(function(){
@humaan
humaan / webpack-demo-01-package.json
Last active January 18, 2016 01:45
{
"name": "humaan-demo-webpack-react-app",
"version": "1.0.0",
"description": "A basic environment for writing React apps in ES6 and built using webpack",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack-server": "webpack-dev-server --hot --progress --colors",
"web-server": "http-server -p 3000 .",
"start": "npm run webpack-server & npm run web-server"
@humaan
humaan / webpack-demo-02-index.html
Created September 2, 2015 00:36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Demo</title>
</head>
<body>
<script src="http://localhost:8080/build/bundle.js" charset="utf-8"></script>
</body>
</html>
@humaan
humaan / webpack-demo-03-webpack.config.js
Created September 2, 2015 00:40
module.exports = {
entry: getEntrySources(['./src/js/entry.js']),
output: {
publicPath: 'http://localhost:8080/',
filename: 'build/bundle.js'
},
devtool: 'eval',
module: {
preLoaders: [
{