Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/**
 * Little helper to create a circle
 * @group control-points
 * @access private
 * @param {Number} $size - Circle size
 * @output Dimensions, margin and border-radius
 */
@mixin circle($size) {
  width: $size;
  height: $size;
  margin: -($size/2);
  border-radius: 50%;
}

/**
 * Helper to position an item in absolute context
 * @param {Number} $top (null) - Top offset
 * @param {Number} $right (null) - Right offset
 * @param {Number} $bottom (null) - Bottom offset
 * @param {Number} $left (null) - Left offset
 * @output `position: absolute` and offsets
 */
@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

/**
 * Linear interpolation
 * @author Tim Severien
 * @param {Number} $a
 * @param {Number} $b
 * @param {Number} $p
 * @return {Number}
 */
@function lerp($a, $b, $p) {
  @return ($b - $a) * $p + $a;
}


/**
 * Linear interpolation points
 * @author Tim Severien
 * @param {Number} $a
 * @param {Number} $b
 * @param {Number} $p
 * @return {List}
 */
@function lerp-point($a, $b, $p) {
  @return lerp(nth($a, 1), nth($b, 1), $p), lerp(nth($a, 2), nth($b, 2), $p);
}


/**
 * Bezier Reduce
 * @author Tim Severien
 * @param {List} $points
 * @param {Number} $p
 * @return {Number}
 */
@function bezier-reduce($points, $p) {
  @while length($points) > 1 {
    $tmp: ();
    
    @for $i from 1 to length($points) {
      $tmp: append($tmp, lerp-point(nth($points, $i), nth($points, $i + 1), $p));
    }
    
    $points: $tmp;
  }
  
  @return nth($points, 1);
}


/**
 * Bezier shadow
 * @param {List} $points - List of points from Bezier
 * @param {Number} $detail - Number of particles
 * @output box-shadow
 * @author Tim Severien
 */
@mixin bezier-shadow($points, $detail) {
  $shadow: ();
  
  @for $i from 0 to $detail {
    $point: bezier-reduce($points, $i / $detail);
    $shadow: append($shadow, nth($point, 1) nth($point, 2), comma);
  }
  
  box-shadow: $shadow;
}


/**
 * Curve wrapper
 * @access private
 * @param {Map} $conf - Curve configuration
 * @requires {mixin} absolute
 * @output Contexte
 */
@mixin draw-curve-wrapper($conf) {
  @include absolute($top: 0, $right: 0, $bottom: 0, $left: 0);
  color: map-get($conf, 'color');
}


/**
 * Display dots with `::after` pseudo-element
 * @access private
 * @param {Map} $conf - Curve configuration
 * @requires {mixin} absolute
 * @requires {mixin} circle
 * @output Dots
 */
@mixin draw-dots($conf) {
  $args: map-get($conf, 'points');
  $size: map-get($conf, 'size');
  
  &::after {
    content: '';
    @include circle(4px);
    @include absolute($left: 0, $top: 0); 
    @include bezier-shadow((
      0 $size,
      (nth($args, 1) * $size) ((1 - nth($args, 2)) * $size),
      (nth($args, 3) * $size) ((1 - nth($args, 4)) * $size),
      $size 0
    ), map-get($conf, 'detail'));
  }
}


/**
 * Draw control-points as well as lines getting to those
 * @access private
 * @param {Map} $conf - Curve configuration
 * @requires {mixin} absolute
 * @requires {mixin} circle
 * @output control-points
 */
@mixin draw-control-points($conf) {
  $args: map-get($conf, 'points');
  $size: map-get($conf, 'size');
  $color: map-get($conf, 'color');
  
  $x1: nth($args, 1);
  $y1: nth($args, 2);
  $x2: nth($args, 3);
  $y2: nth($args, 4);
  
  &::before {
    content: '';
    @include absolute;
    @include circle(10px);
    box-shadow:
      0 $size 0 0 tomato,
      $size 0 0 0 deepskyblue,
      ($size * $x1) $size - ($size * $y1) 0 0 tomato,
      ($size * $x2) $size - ($size * $y2) 0 0 deepskyblue; 
  } 
  
  > * {
    @include absolute($top: 0, $right: 0, $bottom: 0, $left: 0);

    &::before {
      @include absolute($left: 0, $bottom: 0);
      content: '';
      width:  $x1 * 100%;
      height: $y1 * 100%; 
      foo: atan($y1 / $x1);
      background: linear-gradient(
        90deg, 
//        if($x1 == 1, 90deg, 0 - atan($y1 / $x1) * 1rad), 
        transparent calc(50% - 1px), 
        $color calc(50% - 1px), 
        $color calc(50% + 1px), 
        transparent calc(50% + 1px)
      ); 
    }
  }
}


/**
 * Main function, drawing a Bezier function
 * @access private
 * @param {Map} $conf - Curve configuration
 * @output Dots and possibly control-points
 */
@mixin draw-curve($conf) {
  // Print the wrapper
  @include draw-curve-wrapper($conf);
  
  // Print the dots
  @include draw-dots($conf);
  
  // Print the control-points
  @if map-get($conf, 'control-points') != false {
    @include draw-control-points($conf);
  }
}

/**
 * Draw coords system
 * @access private
 * @param {Map} $conf - Curve configuration
 * @param {Bool} $display-name (false) - Enable/disable name display
 */
@mixin draw-system($conf) {
  width: map-get($conf, 'size');
  height: map-get($conf, 'size');
  position: relative;
  color: map-get($conf, 'color');
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-top: 1px dashed;
  border-right: 1px dashed;
  
  &::after,
  &::before {
    position: absolute;
    bottom: -1.75em;
    text-transform: uppercase;
    font-size: .75em;
  }
  
  @if map-get($conf, 'informations') {
    @if map-has-key($conf, 'name') {
      // Display name
      &::before {
        content: "#{map-get($conf, 'name')}";
        left: 0;
      }
    }

    // Display values
    &::after {
      content: "#{map-get($conf, 'points')}";
      right: 0;
    }
  }
  // Print the curve
  > * {
    @include draw-curve($conf); 
  }
}


/**
 * Draw a cubic bezier function.
 * Also initialize a global variable holding the configuration.
 * @access public
 * @param {Number} $x1 - X of first pair
 * @param {Number} $y1 - Y of first pair
 * @param {Number} $x2 - X of second paid
 * @param {Number} $y2 - Y of second pair
 * @param {Map} $options - Map of options
 */
@mixin cubic-bezier($x1, $y1, $x2, $y2, $options: ()) {
  // Default options
  $options: map-merge((
    // Enable/disable control-points
    'control-points': true,
    // Extra informations
    'informations': true,
    // Size of the grid
    'size': 300px,
    // Color scheme
    'color': #999, 
    // Points from the curve
    'points': ($x1, $y1, $x2, $y2),
    // Number of dots on the curve
    'detail': 30
  ), $options);
  
  // Start printing things
  @include draw-system($options);
}



/**
 * DEMO *
       **/

.grid {
  margin: 1em;
  float: left;
}

.grid-1 {
  @include cubic-bezier(.42, 0, 1, 1, ( 
    'name': 'ease-in'
  ));
} 

.grid-2 {
  @include cubic-bezier(.42, 0, .58, 1, (
    'name': 'ease-in-out'
  ));
}

.grid-3 {
  @include cubic-bezier(.13, .88, .5, .42); 
}

SassMeister-output.css

/**
 * Little helper to create a circle
 * @group control-points
 * @access private
 * @param {Number} $size - Circle size
 * @output Dimensions, margin and border-radius
 */
/**
 * Helper to position an item in absolute context
 * @param {Number} $top (null) - Top offset
 * @param {Number} $right (null) - Right offset
 * @param {Number} $bottom (null) - Bottom offset
 * @param {Number} $left (null) - Left offset
 * @output `position: absolute` and offsets
 */
/**
 * Linear interpolation
 * @author Tim Severien
 * @param {Number} $a
 * @param {Number} $b
 * @param {Number} $p
 * @return {Number}
 */
/**
 * Linear interpolation points
 * @author Tim Severien
 * @param {Number} $a
 * @param {Number} $b
 * @param {Number} $p
 * @return {List}
 */
/**
 * Bezier Reduce
 * @author Tim Severien
 * @param {List} $points
 * @param {Number} $p
 * @return {Number}
 */
/**
 * Bezier shadow
 * @param {List} $points - List of points from Bezier
 * @param {Number} $detail - Number of particles
 * @output box-shadow
 * @author Tim Severien
 */
/**
 * Curve wrapper
 * @access private
 * @param {Map} $conf - Curve configuration
 * @requires {mixin} absolute
 * @output Contexte
 */
/**
 * Display dots with `::after` pseudo-element
 * @access private
 * @param {Map} $conf - Curve configuration
 * @requires {mixin} absolute
 * @requires {mixin} circle
 * @output Dots
 */
/**
 * Draw control-points as well as lines getting to those
 * @access private
 * @param {Map} $conf - Curve configuration
 * @requires {mixin} absolute
 * @requires {mixin} circle
 * @output control-points
 */
/**
 * Main function, drawing a Bezier function
 * @access private
 * @param {Map} $conf - Curve configuration
 * @output Dots and possibly control-points
 */
/**
 * Draw coords system
 * @access private
 * @param {Map} $conf - Curve configuration
 * @param {Bool} $display-name (false) - Enable/disable name display
 */
/**
 * Draw a cubic bezier function.
 * Also initialize a global variable holding the configuration.
 * @access public
 * @param {Number} $x1 - X of first pair
 * @param {Number} $y1 - Y of first pair
 * @param {Number} $x2 - X of second paid
 * @param {Number} $y2 - Y of second pair
 * @param {Map} $options - Map of options
 */
/**
 * DEMO *
       **/
.grid {
  margin: 1em;
  float: left;
}

.grid-1 {
  width: 300px;
  height: 300px;
  position: relative;
  color: #999;
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-top: 1px dashed;
  border-right: 1px dashed;
}

.grid-1::after,
.grid-1::before {
  position: absolute;
  bottom: -1.75em;
  text-transform: uppercase;
  font-size: .75em;
}

.grid-1::before {
  content: "ease-in";
  left: 0;
}

.grid-1::after {
  content: "0.42, 0, 1, 1";
  right: 0;
}

.grid-1 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #999;
}

.grid-1 > *::after {
  content: '';
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0px 300px, 12.75178px 299.02222px, 25.77422px 296.17778px, 39.018px 291.6px, 52.43378px 285.42222px, 65.97222px 277.77778px, 79.584px 268.8px, 93.21978px 258.62222px, 106.83022px 247.37778px, 120.366px 235.2px, 133.77778px 222.22222px, 147.01622px 208.57778px, 160.032px 194.4px, 172.77578px 179.82222px, 185.19822px 164.97778px, 197.25px 150px, 208.88178px 135.02222px, 220.04422px 120.17778px, 230.688px 105.6px, 240.76378px 91.42222px, 250.22222px 77.77778px, 259.014px 64.8px, 267.08978px 52.62222px, 274.40022px 41.37778px, 280.896px 31.2px, 286.52778px 22.22222px, 291.24622px 14.57778px, 295.002px 8.4px, 297.74578px 3.82222px, 299.42822px 0.97778px;
}

.grid-1 > *::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  box-shadow: 0 300px 0 0 tomato, 300px 0 0 0 deepskyblue, 126px 300px 0 0 tomato, 300px 0px 0 0 deepskyblue;
}

.grid-1 > * > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.grid-1 > * > *::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 42%;
  height: 0%;
  foo: atan(0);
  background: linear-gradient(90deg, transparent calc(50% - 1px), #999 calc(50% - 1px), #999 calc(50% + 1px), transparent calc(50% + 1px));
}

.grid-2 {
  width: 300px;
  height: 300px;
  position: relative;
  color: #999;
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-top: 1px dashed;
  border-right: 1px dashed;
}

.grid-2::after,
.grid-2::before {
  position: absolute;
  bottom: -1.75em;
  text-transform: uppercase;
  font-size: .75em;
}

.grid-2::before {
  content: "ease-in-out";
  left: 0;
}

.grid-2::after {
  content: "0.42, 0, 0.58, 1";
  right: 0;
}

.grid-2 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #999;
}

.grid-2 > *::after {
  content: '';
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0px 300px, 12.34578px 299.02222px, 24.20622px 296.17778px, 35.616px 291.6px, 46.60978px 285.42222px, 57.22222px 277.77778px, 67.488px 268.8px, 77.44178px 258.62222px, 87.11822px 247.37778px, 96.552px 235.2px, 105.77778px 222.22222px, 114.83022px 208.57778px, 123.744px 194.4px, 132.55378px 179.82222px, 141.29422px 164.97778px, 150px 150px, 158.70578px 135.02222px, 167.44622px 120.17778px, 176.256px 105.6px, 185.16978px 91.42222px, 194.22222px 77.77778px, 203.448px 64.8px, 212.88178px 52.62222px, 222.55822px 41.37778px, 232.512px 31.2px, 242.77778px 22.22222px, 253.39022px 14.57778px, 264.384px 8.4px, 275.79378px 3.82222px, 287.65422px 0.97778px;
}

.grid-2 > *::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  box-shadow: 0 300px 0 0 tomato, 300px 0 0 0 deepskyblue, 126px 300px 0 0 tomato, 174px 0px 0 0 deepskyblue;
}

.grid-2 > * > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.grid-2 > * > *::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 42%;
  height: 0%;
  foo: atan(0);
  background: linear-gradient(90deg, transparent calc(50% - 1px), #999 calc(50% - 1px), #999 calc(50% + 1px), transparent calc(50% + 1px));
}

.grid-3 {
  width: 300px;
  height: 300px;
  position: relative;
  color: #999;
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-top: 1px dashed;
  border-right: 1px dashed;
}

.grid-3::after,
.grid-3::before {
  position: absolute;
  bottom: -1.75em;
  text-transform: uppercase;
  font-size: .75em;
}

.grid-3::after {
  content: "0.13, 0.88, 0.5, 0.42";
  right: 0;
}

.grid-3 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #999;
}

.grid-3 > *::after {
  content: '';
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0px 300px, 4.13878px 274.91356px, 8.75022px 252.34844px, 13.827px 232.146px, 19.36178px 214.14756px, 25.34722px 198.19444px, 31.776px 184.128px, 38.64078px 171.78956px, 45.93422px 161.02044px, 53.649px 151.662px, 61.77778px 143.55556px, 70.31322px 136.54244px, 79.248px 130.464px, 88.57478px 125.16156px, 98.28622px 120.47644px, 108.375px 116.25px, 118.83378px 112.32356px, 129.65522px 108.53844px, 140.832px 104.736px, 152.35678px 100.75756px, 164.22222px 96.44444px, 176.421px 91.638px, 188.94578px 86.17956px, 201.78922px 79.91044px, 214.944px 72.672px, 228.40278px 64.30556px, 242.15822px 54.65244px, 256.203px 43.554px, 270.52978px 30.85156px, 285.13122px 16.38644px;
}

.grid-3 > *::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  box-shadow: 0 300px 0 0 tomato, 300px 0 0 0 deepskyblue, 39px 36px 0 0 tomato, 150px 174px 0 0 deepskyblue;
}

.grid-3 > * > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.grid-3 > * > *::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 13%;
  height: 88%;
  foo: atan(6.76923);
  background: linear-gradient(90deg, transparent calc(50% - 1px), #999 calc(50% - 1px), #999 calc(50% + 1px), transparent calc(50% + 1px));
}