David Bumbeishvili bumbeishvili

Make sure to pop out to a new window, and then scroll.

An experiment to see if I can get svg paths to animate only to a certain horizontal line while a user scrolls. Used in my unreleased wongfu side project.

Built with blockbuilder.org

x	y	z	lp_x	lp_y	lp_z	hp_x	hp_y	hp_z
0.235458	-0.597702	-0.724487	0.232433	-0.593757	-0.717156	0.003025	-0.003945	-0.007332
0.235458	-0.597702	-0.724487	0.232735	-0.594152	-0.717889	0.002723	-0.003550	-0.006598
0.217346	-0.597702	-0.724487	0.231197	-0.594507	-0.718549	-0.013850	-0.003195	-0.005939
0.217346	-0.579590	-0.724487	0.229812	-0.593015	-0.719143	-0.012465	0.013425	-0.005345
0.199234	-0.579590	-0.724487	0.226754	-0.591673	-0.719677	-0.027520	0.012083	-0.004810
0.199234	-0.597702	-0.760712	0.224002	-0.592276	-0.723781	-0.024768	-0.005426	-0.036931
0.163010	-0.579590	-0.706375	0.217903	-0.591007	-0.722040	-0.054893	0.011417	0.015665
0.108673	-0.597702	-0.724487	0.206980	-0.591676	-0.722285	-0.098307	-0.006026	-0.002203
0.090561	-0.615814	-0.724487	0.195338	-0.594090	-0.722505	-0.104777	-0.021724	-0.001982

Convert image to a somewhat NES-style image:

Get the colors of each square of n pixels.
Convert those colors from RGB to LAB and average them.
Round that color to the closest color in the NES palette.
Convert back to RGB and set all n pixels to that color.

Animating a path's dashed stroke using stroke-dasharray and stroke-dashoffset, similar to this example. This version ensures that there's no little "seam" at the end of a closed path by dynamically setting the dash array and the animation keyframe to a factor of the computed path length.

stroke-dashadjust might make this easier eventually.

Moving elements along a path while maintaining orientation. For each arrow, the translate is determined by interpolating a point along the length of the path and the rotation is determined by calculating the approximate tangent of the path using two nearby points.

Animating a path with an arrowhead using stroke-dasharray and interpolation along the path for the arrow positioning. The translate is determined by a point along the length of the path and the rotation is determined by calculating the approximate tangent of the path using two nearby points.

	//creates new point
	function P(x, y, color){
	var rv
	if (x.map){
	rv = {x: x[0], y: x[1], color: 'black'}
	} else{
	rv = {x: x, y: y, color: color \|\| 'black'}
	}
	rv.toString = function(){ return rv.x + ',' + rv.y }
	rv.type = 'point'

	scrolling: yes
	license: MIT