Skip to content

Instantly share code, notes, and snippets.

Avatar

Will Boyd lonekorean

View GitHub Profile
@lonekorean
lonekorean / file.css
Last active Nov 1, 2020
Prefers reduced motion test
View file.css
@media (prefers-reduced-motion) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
@lonekorean
lonekorean / file.scss
Created Mar 11, 2019
Coder's Block v6 code styles
View file.scss
@mixin code-wrap {
border: 1px dashed #ccc;
background-color: #f2f2f2;
}
code {
font-family: 'Source Code Pro', monospace;
}
// inline code
@lonekorean
lonekorean / file.js
Created Dec 20, 2018
A chunk of my gatsby-node.js
View file.js
exports.createPages = ({ graphql, actions }) => {
return new Promise((resolve, reject) => {
graphql(`
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
node {
fields {
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Starting both goo blobs backgrounds
View file.js
// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
// start first goo blobs background
Object.create(gooBlobs).init({
canvasSelector: '#bg1'
});
// start second goo blobs background
Object.create(gooBlobs).init({
canvasSelector: '#bg2',
View file.css
#bg1 {
z-index: -1;
filter: url('#goo');
}
#bg2 {
z-index: -2;
filter: url('#goo') blur(4px);
}
@lonekorean
lonekorean / file.html
Last active Jun 11, 2018
Goo blobs SVG filter
View file.html
<svg>
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 50 -16
" result="matrix" />
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Options for goo blobs
View file.js
options: {
canvasSelector: '', // to find <canvas> in DOM to draw on
radiusRange: [75, 150], // random range of body radii
xVarianceRange: [-1, 1], // random range of x velocity scaling on bodies
yVarianceRange: [0.5, 1.5], // random range of y velocity scaling on bodies
airFriction: 0.04, // air friction of bodies
opacity: 1, // opacity of bodies
collisions: false, // do bodies collide or pass through
scrollVelocity: 0.015, // scaling of scroll delta to velocity applied to bodies
pixelsPerBody: 50000, // viewport pixels required for each body added
@lonekorean
lonekorean / file.js
Last active Jun 10, 2018
Options for hex bokeh
View file.js
options: {
canvasSelector: '', // to find <canvas> in DOM to draw on
radiusRange: [30, 60], // random range of body radii
xVarianceRange: [0.1, 0.3], // random range of x velocity scaling on bodies
yVarianceRange: [0.5, 1.5], // random range of y velocity scaling on bodies
airFriction: 0.03, // air friction of bodies
opacity: 0.5, // opacity of bodies
collisions: false, // do bodies collide or pass through
scrollVelocity: 0.025, // scaling of scroll delta to velocity applied to bodies
pixelsPerBody: 40000, // viewport pixels required for each body added
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Starting both hex bokeh backgrounds
View file.js
// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
// start first hex bokeh background
Object.create(hexBokeh).init({
canvasSelector: '#bg1'
});
// start second hex bokeh background
Object.create(hexBokeh).init({
canvasSelector: '#bg2',
@lonekorean
lonekorean / file.css
Created Jun 10, 2018
Double canvas blurs
View file.css
#bg1 {
z-index: -1;
filter: blur(1px);
}
#bg2 {
z-index: -2;
filter: blur(10px);
}