Skip to content

Instantly share code, notes, and snippets.

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dd, header, nav, article, section,
aside, figure, figcaption, footer, dl, dd, dt {
margin: 0px;
padding: 0px;
}
html {
// Hide persistent scrollbar in IE (10/11) and Edge
-ms-overflow-style: -ms-autohiding-scrollbar;
}
@tomgp
tomgp / index.html
Last active May 4, 2018 11:23
svg calendar page
<!DOCTYPE html>
<html>
<head>
<title>calendar</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js">
</script>
<style type="text/css">
body{
background: #eee;
}
@tomgp
tomgp / index.html
Created January 29, 2018 15:44
sine oscilator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="index.js"></script>
</head>
@tomgp
tomgp / index.html
Created November 14, 2017 11:00
canvas kaleidoscope
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>kaleidoscope</title>
<style>
@tomgp
tomgp / index.html
Last active November 13, 2017 11:57
css mix-blend-mode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mix blend mode</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
const blends = [ 'normal','multiply','screen','overlay','darken','lighten','color-dodge','color-burn','hard-light','soft-light','difference','exclusion','hue','saturation','color','luminosity'];
@tomgp
tomgp / index.html
Last active November 10, 2017 14:05
svg path jittering
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="path-data-polyfill.js"></script>
<title>Displacement</title>
@tomgp
tomgp / index.js
Created September 27, 2017 13:54
convert a bunch of files using nodejs and the sips utility on osx
const fs = require('fs');
const path = require('path');
const { spawn } = require('child_process');
const root = './';
const sizes = {
s:300,
m:600,
l:1200,
};
@tomgp
tomgp / layoutstack.js
Created June 23, 2017 12:52
Simple end to end layout (for stacked area etc.)
const d = [1,2,3,4,5,6,7,8,9];
const layedOut = d.reduce((acc, current)=>{
acc.data.push({
value:current,
start:acc.accumulatedValue,
});
acc.accumulatedValue+=current;
return acc;
},{
@tomgp
tomgp / package.json
Created May 28, 2017 18:21
simple npm script based build for js projects
{
"name": "starter",
"version": "0.0.1",
"main": "index.js",
"license": "MIT",
"dependencies": {
"browser-sync": "^2.18.12",
"nodemon": "^1.11.0",
"webpack": "^2.6.1"
},
@tomgp
tomgp / index.html
Created May 18, 2017 11:12
some css layouts I've used, an ongoing collection
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS layouts</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body{
font-family: sans-serif;