speckworks

<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>

speckworks

<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>

speckworks

let your_drink = "coffee";

const reverse = (s) => {
  return s.split("").reverse().join("");
} 

const barista = {
  str1: "ion",
  str2: reverse("rcne"),
  str3: "ypt",

speckworks

//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]);

speckworks

//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;

speckworks

//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)
  }
}

speckworks

<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>


 
 

speckworks

DrawSVGPlugin (All SVG Shape Types)

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

A Pen by GreenSock on CodePen.

License.

speckworks

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

speckworks

Animation with CSS3

A Pen by John K. Speck on CodePen.

License.