John K. Speck speckworks

Animation with CSS3

Shows how GreenSock's DrawSVGPlugin can animate the strokes on , , , and . It can also do and . Learn more at www.greensock.com/drawSVG

	//In this Algorithm there is only on variable "i" declared and it contains a number.
	//Even though that number can increase to an arbitrarily large value (according to input n),
	//Space Complexity is constant since it's just 1 value that is changing.

	const logUpToN(n) => {
	for(let i = 1; i <= n; i++){
	console.log(i)
	}
	}

	//This algorithm is O(n) because as it creates a new Array taking up
	//(1/2 * n) amount of memory as n becomes arbitrarily large.
	const onlyElementsAtEvenIndices = (array) => {
	let newArray = Array(Math.ceil(array.length / 2 ));
	for (let i = 0; i < array.length; i++) {
	if (i % 2 === 0) {
	newArray[i / 2] = array [i]
	}
	}
	return newArray;

	//This is a recursive Algorithm for generating the Fibonacci series. It will require O(n^2),
	because it calls itself and has to allocate space for a new Array until it reaches the "break point",
	which here is "number === 1".

	const fibonacciSeq = (number) => {
	if(number === 1) {
	return [0,1];
	} else {
	let fib = fibonacciSeq(number - 1);
	fib.push(fib[fib.length - 1] + fib[fib.length - 2]);

	<div class="card br">
	<div class="wrapper">
	<div class="profilePic animate din">ham de doo dee</div>

	<div class="comment animate w80">whut comment</div>
	<div class="box animate">whut box</div>
	<div class="button animate"></div>
	<div class="button animate"></div><div class="button animate"></div>
	</div>
	<div>

	<div id="root">
	<!-- This div's content will be managed by React. -->
	</div>

	<div class=cropper>
	<img class="sphere" src="https://cdn1.vectorstock.com/i/thumb-large/47/65/zebra-pattern-eps-10-vector-10114765.jpg" alt="Zebra Pattern EPS 10">
	</div>