A simple animated watercolor paintbrush. Works best in Chrome.
A Pen by Riley Shaw on CodePen.
rileyjshaw
/ _compass_retina_sprites.sass
Last active
August 29, 2015 14:06
Retina sprites compass mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| =retina-sprites($spritesheet) | |
| @each $sprite in sprite_names($spritesheet) | |
| &.#{$sprite} | |
| $positions: '' | |
| @each $j in sprite-position($spritesheet, $sprite) | |
| $positions: append($positions, $j / 2, space) | |
| height: image-height(sprite-file($spritesheet, $sprite)) / 2 | |
| width: image-width(sprite-file($spritesheet, $sprite)) / 2 | |
| background-position: $positions |
rileyjshaw
/ _compass_speech_bubbles.sass
Created
September 14, 2014 21:07
Speech bubble compass mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| =speech-bubble($arrow-direction: bottom, $arrow-pos: 50%, $height: 60px, $width: 60px, $padding: 0, $arrow-width: 12px, $arrow-length: 12px, $color: #aaa, $bgcolor: #333, $border-radius: 4px, $content: '', $bg-img: '', $bg-size: auto, $stab: 8px, $positioned: false, $size: 'medium') | |
| $arrow-v: '' | |
| $arrow-h: '' | |
| $offset-direction: '' | |
| $offset-body: '' | |
| @if $arrow-direction == left or $arrow-direction == right | |
| $arrow-v: transparent | |
| $arrow-h: $bgcolor | |
| $offset-direction: top |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a href="http://rileyjshaw.com/sweep/" | |
| #box | |
| p sweep.js |
Combines my isPrime and Kaprekar pens, only changing the color to the Kaprekar depth of primes.
Colors from the Ulam Kaprekar pen
A Pen by Riley Shaw on CodePen.
No jQuery dependency, section progress shown in headers, click to scroll, resizable with scrollbar on window. Inspired by Slinky.js and DesignWall.
Currently doesn't work on iOS < 8 since they mess with scroll events. If you use this in production, look into iScroll.
A Pen by Riley Shaw on CodePen.
rileyjshaw
/ Film-grain-effect-in-138B-of-JavaScript.markdown
Created
October 12, 2014 22:05
A Pen by Riley Shaw.
Golfed on this one until it fit in a tweet :)
...then golfed some more.
A Pen by Riley Shaw on CodePen.
Toy example that shows how a user can step through a recursive function. Pretty simple; just implement your own stack instead of relying on the call-stack. I used this technique to traverse the link tree in my visited vector reaction game.
License: MIT
rileyjshaw
/ alpha_compositing_timer.html
Last active
August 29, 2015 14:09
An experiment: does it take longer to alpha composite different colors? Used to automate http://rileyjshaw.com/visited-vectors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Alpha compositing timer</title> | |
| <style> | |
| #container { | |
| position: relative; | |
| width: 360px; | |
| height: 360px; |
Scrappy implementation of a text fade-in effect using lining.js
A Pen by Riley Shaw on CodePen.