Skip to content

Instantly share code, notes, and snippets.

View matrix-design-tokens.json
{
"style": {
"color": {
"BG": {
"0": {
"type": "SOLID",
"value": "#0c0f10"
},
"1": {
"type": "SOLID",
View index.html
<div class="p-summary">
<h1>Hello</h1>
</div>
<canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
View filter-goo-4
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
<defs>
<filter id="filter-goo-4">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" 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 19 -9" result="goo" />
</filter>
</defs>
</svg>
View gist:e6b74ff9cd14630266bc34a9016be179
/*
* Scripts - Utilities - Preload Images
*/
export function imagesPreload(imageUrls) {
let images = []
let count = 0
@davidbwaters
davidbwaters / index.html
Created Dec 31, 2020
Simple Radial Mouse Cursor
View index.html
<h2>
Simple Radial Mouse Cursor
<br><small>25 lines of JavaScript</small>
</h2>
<div id="mouse-circle"></div>
View gist:3992a4b1cde59c3964d6bb10d8dc8ec6
<script type="text/javascript">
$('.lecture_complete_button').click((evt) => {
const progBar = document.querySelector('.progressbar')
if (progBar.style.minWidth !== '50%') {
progBar.style.minWidth = '50%'
document.querySelector('span.percentage').innerText = '50%'
}
})
</script>
@davidbwaters
davidbwaters / io.js
Last active Dec 22, 2020
intersection observer direction helpers
View io.js
let previousY = 0
let previousRatio = 0
function getObserverEntryInfo(entry, previousY, previousRatio) {
let direction
let approach
const hasLargerRatio =
entry.intersectionRatio > previousRatio
@davidbwaters
davidbwaters / index.pug
Created Jul 23, 2020
Single line waveform formulas
View index.pug
canvas#canvas Your browser doesn't support the HTML5 Canvas element :(