Square

index.pug

#center
  - var max_n = 9;
  // Open bracket
  svg(
	    xmlns="http://www.w3.org/2000/svg" version="1.1"
	    width="30" height="180" viewBox="0 0 30 180")
    path(d="M 30 0 Q 0 90 30 180")
    
  // Generating boxes that represent the INPUT of the square function
  #from
    - var actual_n = 1;
    while actual_n <= max_n
      - var n = actual_n++;
      .m
        while n > 0
          - --n
          .n
          
  // Close bracket with square sign
  svg(
	    xmlns="http://www.w3.org/2000/svg" version="1.1"
	    width="30" height="180" viewBox="0 0 30 180")
    path(d="M 0 0 Q 30 90 0 180")
    text(x="20" y="15") 2
    
  // Equal sign
  #equal =
  
  // Open bracket
  svg(
	    xmlns="http://www.w3.org/2000/svg" version="1.1"
	    width="30" height="180" viewBox="0 0 30 180")
    path(d="M 30 0 Q 0 90 30 180")
    
  // Generating boxes that represent the OUTPUT of the square function
  #to
    - var actual_n = 1;
    while actual_n <= max_n
      - var n = actual_n*actual_n;
      - actual_n++;
      .m
        while n > 0
          - --n
          .n
          
  // Close bracket
  svg(
	    xmlns="http://www.w3.org/2000/svg" version="1.1"
	    width="30" height="180" viewBox="0 0 30 180")
    path(d="M 0 0 Q 30 90 0 180")

square.markdown

Square

Square function visualization. The boxes that represent a unit are generated in Pug as simple divs. Each box has a dedicated animation in SCSS that displays the unit then assembles a square function from them.

A Pen by HARUN PEHLİVAN on CodePen.

License.

style.scss

@import url('https://fonts.googleapis.com/css?family=Roboto');

$primary-color: #EDF2F7; 
$secondary-color: #529CF2;
$background-color: #2660A4;

$max-n: 9; // Max number

$inner-size-start: 10px; // Initial size of the boxes 
$margin-start: 5px;
$outter-size-start: $inner-size-start + $margin-start*2;

$inner-size-end: 3px; // Final size of the boxes, when they become part of the graph
$margin-end: 0px;
$outter-size-end: $inner-size-end + $margin-end*2;

$box-area-size: $outter-size-start * $max-n;
$graph-area-width: $outter-size-end * $max-n + 50px;

$animation_duration: $max-n * 2.5s;

html {
  font-family: 'Roboto', sans-serif;
  background-color: $background-color;
}

#center {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -($box-area-size + $graph-area-width)-40-30-30-20-20; 
  margin-top: -$box-area-size/2; 
  white-space: nowrap;
}

#from, #equal, #to, svg {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  height: $box-area-size;
  line-height: $box-area-size;
  
}
#from, #to {
  width: $box-area-size + $graph-area-width;
  margin: 20px;
}

#equal {
 font-size: 30px;  
 margin: 20px;
 color: $secondary-color;
}

svg {
  stroke: $secondary-color;
  stroke-width: 3px; 
  fill: none;
}
text {
  stroke-width: 0px;
  fill: $secondary-color;
  font-size: 20px;
}

.n {
  position: absolute;
  background-color: $primary-color;
}

#from {
  @for $actual-n from 1 through $max-n {
    @for $i from 1 through $actual-n {
      
      $left-start: ($box-area-size - $inner-size-start - $margin-start*2)/2 + $graph-area-width;
      $bottom-start: ($i - 1) * $outter-size-start + ($max-n - $actual-n)*$outter-size-start/2;
      $left-end: $actual-n * $outter-size-end;
      $bottom-end: ($i - 1) * $outter-size-end;

      .m:nth-of-type(#{$actual-n}) .n:nth-of-type(#{$i}) {
        animation: animate_from_#{$actual_n}_#{$i} $animation_duration linear infinite;
      }

      @keyframes animate_from_#{$actual_n}_#{$i} {
        0%, #{100%/$max-n*($actual-n - 1)} { 
          opacity: 0;
          left: $left-start; 
          bottom: $bottom-start; 
          width: $inner-size-start;
          height: $inner-size-start;
          margin: $margin-start;
        }
        #{100%/$max-n*($actual-n - 0.75)}, #{100%/$max-n*($actual-n - 0.3)} {
          opacity: 1;
          left: $left-start; 
          bottom: $bottom-start; 
          width: $inner-size-start;
          height: $inner-size-start;
          margin: $margin-start;
        }
        #{100%/$max-n*($actual-n)}, 100% {
          left: $left-end; 
          bottom: $bottom-end; 
          width: $inner-size-end;
          height: $inner-size-end;
          margin: $margin-end;
        }
      }
    }
  }
}

#to {
  @for $actual-n from 1 through $max-n {
    @for $i from 1 through $actual-n*$actual-n {
      
      $left-start: ($i - 1) % $actual-n * $outter-size-start + ($max-n - $actual-n)*$outter-size-start/2 + $graph-area-width;
      $bottom-start: floor(($i - 1) / $actual-n) * $outter-size-start + ($max-n - $actual-n)*$outter-size-start/2;
      $left-end: $actual-n * $outter-size-end;
      $bottom-end: ($i - 1) * $outter-size-end;

      .m:nth-of-type(#{$actual-n}) .n:nth-of-type(#{$i}) {
        animation: animate_to_#{$actual-n}_#{$i} $animation_duration linear infinite;
      }

      @keyframes animate_to_#{$actual-n}_#{$i} {
        0%, #{100%/$max-n*($actual-n - 1)} { 
          opacity: 0;
          left: $left-start; 
          bottom: $bottom-start; 
          width: $inner-size-start;
          height: $inner-size-start;
          margin: $margin-start;
        }
        #{100%/$max-n*($actual-n - 0.75)}, #{100%/$max-n*($actual-n - 0.3)} {
          opacity: 1;
          left: $left-start; 
          bottom: $bottom-start; 
          width: $inner-size-start;
          height: $inner-size-start;
          margin: $margin-start;
        }
        #{100%/$max-n*($actual-n)}, 100% {
          left: $left-end; 
          bottom: $bottom-end; 
          width: $inner-size-end;
          height: $inner-size-end;
          margin: $margin-end;
        }
      }
    }
  }
}