Skip to content

Instantly share code, notes, and snippets.

View hugozap's full-sized avatar

Hugo Zapata hugozap

39 followers · 31 following
View GitHub Profile
@hugozap
hugozap / attribute-motion.jsx
Created May 16, 2018 23:39
<SvgLoader id="animated" path="1.svg">
<AttributeMotion
selector="#Star"
start={{
opacity: 0
}}
target={{
opacity: this.state.opacity
}}
/>
@hugozap
hugozap / transform-motion.jsx
Last active May 16, 2018 23:39
<SvgLoader id="animated" path="1.svg">
<TransformMotion
selector="#Star"
start={{
x: 0,
y: 0,
angle: 0,
rotateX: centerOfRotationX,
rotateY: centerOfRotationY
}}
@hugozap
hugozap / gist:81eb552ca10b6e62bd469c1933748d53
Created April 8, 2018 23:43 — forked from JJediny/gist:a466eed62cee30ad45e2
Jekyll Liquid Cheatsheet

There are two types of markup in Liquid: Output and Tag.

  • Output markup (which may resolve to text) is surrounded by
{{ matched pairs of curly brackets (ie, braces) }}
  • Tag markup (which cannot resolve to text) is surrounded by
@hugozap
hugozap / rotary-knob-morph-skin.js
Created March 22, 2018 22:16
A skin for react-rotary-knob that uses flubber to morph 2 paths
import { interpolate } from "flubber"
const face1 = `M42.75,0.108 C19.553,0.108 0.681,18.979 0.681,42.176 C0.681,65.372 19.553,84.244 42.75,84.244 C65.945,84.244 84.818,65.372 84.818,42.176 C84.818,18.98 65.945,0.108 42.75,0.108 Z`
const face2 = `M78.522,63.852 C77.65,63.492 76.734,63.308 75.796,63.308 C73.319,63.308 71.069,64.573 69.775,66.614 L53.942,60.055 L72.486,52.375 C73.998,54.208 76.71,54.946 79.011,53.993 C81.891,52.798 83.262,49.481 82.071,46.606 C81.986,46.4 81.889,46.201 81.78,46.007 C83.033,44.077 83.297,41.63 82.385,39.429 C81.276,36.753 78.69,35.024 75.793,35.024 C74.855,35.024 73.939,35.207 73.067,35.568 C69.825,36.913 68.097,40.39 68.836,43.706 L56.958,48.626 L56.958,47.44 C63.491,42.69 67.761,35.011 67.761,26.335 C67.761,11.94 56.05,0.23 41.656,0.23 C27.261,0.23 15.55,11.94 15.55,26.335 C15.55,35.011 19.821,42.69 26.353,47.44 L26.353,48.628 L14.476,43.709 C15.215,40.393 13.486,36.914 10.243,35.569 C9.372,35.208 8.454,35.025 7.516,35.025 C4.62,35.025 2.033,36.754 0.926,39.429 C0.012,41.63 0
@hugozap
hugozap / randomize_svg_def_ids.html
Created March 8, 2018 03:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Randomize SVG def element id's</title>
<style>
.container {
display:grid;
width:100%;
grid-template-columns: 50% 50%;
@hugozap
hugozap / index.html
Last active February 4, 2018 01:57
force test
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="600"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
@hugozap
hugozap / index.html
Created January 8, 2018 17:19
butterfly2
<!-- Adapted from the voronoi example found here: https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links {
}
.polygons {
@hugozap
hugozap / index.html
Created January 8, 2018 17:11
voronoi butterfly
<!-- Adapted from the voronoi example found here: https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links {
}
.polygons {
@hugozap
hugozap / index.html
Created December 29, 2017 11:09
voronoi perf test
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var canvas = d3.select("canvas").on("touchmove mousemove", moved).node(),
context = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
var sites = d3.range(1000*400)
@hugozap
hugozap / index.html
Last active December 29, 2017 10:44
voronoi tests
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var canvas = d3.select("canvas").on("touchmove mousemove", moved).node(),
context = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;