🚲

Tom Pearson tomgp

🚲

Computer user

tomgp / resets.css

Last active May 10, 2018 09:56

	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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / package.json

Created May 28, 2017 18:21

simple npm script based build for js projects

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;