pqoqubbw

<svg width="300" height="300" viewBox="0 0 300 300">
  <defs>
    <filter id="paperEffect">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.04"
        numOctaves="5"
        result="noise"
      />
      <feDiffuseLighting

antfu

Example

Name Description

mattdesl

ToneJS + canvas-sketch

A interactive & generative site with canvas-sketch and Tone.js.

Live Demo:

• https://tone-sketch.surge.sh/

Running the sketch.js Code

whoisryosuke

Hook

import { useState, useEffect } from "react";

const useMousePosition = () => {
  const [mousePosition, setMousePosition] = useState({ x: null, y: null });

  const updateMousePosition = ev => {
 setMousePosition({ x: ev.clientX, y: ev.clientY });

bendc

const randomInterval = (() => {
  const random = (min, max) => Math.random() * (max - min) + min;
  return (callback, min, max) => {
    const time = {
      start: performance.now(),
      total: random(min, max)
    };
    const tick = now => {
      if (time.total <= now - time.start) {
        time.start = now;                                                                                     

bendc

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

chrisbuttery

// fade out 

function fade(el) {
  var op = 1;
  var timer = setInterval(function () {
    if (op <= 0.1){
      clearInterval(timer);
      el.style.display = 'none';
    }
    el.style.opacity = op;

igrigorik

alias gh="open \`git remote -v | grep git@github.com | grep fetch | head -1 | cut -f2 | cut -d' ' -f1 | sed -e's/:/\//' -e 's/git@/http:\/\//'\`"

tomeara

# Put this method in your helper file to render inline SVG

def inline_svg(path)
  file = File.open("app/assets/images/#{path}", "rb")
  raw file.read
end