Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="output"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// I stole half the bubble sort from my dearest Hugo
// http://thesassway.com/advanced/implementing-bubble-sort-with-sass

// COMPARE X COORDINATE
@function compare($a, $b) {
  @return nth($a, 2) - nth($b, 2);
}

// LIST SWAP
@function swap($list, $a, $b) {
  @if abs($a) > length($list) or abs($b) > length($list) {
    @return $list;
  }
  
  $tmp: nth($list, $a);
  $list: set-nth($list, $a, nth($list, $b));
  $list: set-nth($list, $b, $tmp);
  
  @return $list;
}

// BUBBLE SORT W/ CALLBACK
@function sort($list, $func) {
  @for $i from 1 through length($list) {
    @for $j from $i * -1 through -1 {
      $j: abs($j);
      
      @if $j > 1 and call($func, nth($list, $j), nth($list, $j - 1)) {
        $list: swap($list, $j, $j - 1);
      }
    }
  }
  
  @return $list;
}

// SCALE A PATH
@function scale($path, $scale) {
  @for $n from 1 through length($path) {
    $coords: nth($path, $n);
    
    $path: set-nth($path, $n, (
      nth($coords, 1) * $scale,
      nth($coords, 2) * $scale
    ));
  }
  
  @return $path;
}

// TRANSLATE A PATH
@function translate($path, $x, $y) {
  @for $n from 1 through length($path) {
    $coords: nth($path, $n);
    
    $path: set-nth($path, $n, (
      nth($coords, 1) + $x,
      nth($coords, 2) + $y
    ));
  }
  
  @return $path;
}

// GET INTERSECTIONS OF A PATH
@function intersections($path, $y) {
  $intersections: ();
  
  @for $n from 1 through length($path) {
    $a: nth($path, $n);
    $b: nth($path, $n % length($path) + 1);
    
    $top: min(nth($a, 2), nth($b, 2));
    $bottom: max(nth($a, 2), nth($b, 2));
    $left: min(nth($a, 1), nth($b, 1));
    
    @if $top <= $y and $bottom > $y {
      // Difference between a and b
      $size: (
        abs(nth($b, 1) - nth($a, 1)),
        abs(nth($b, 2) - nth($a, 2))
      );
      
      // Get interpolation of line y
      $lerp: ($y - $top) / nth($size, 2);
      
      // If lerp is within boundaries
      @if($lerp >= 0 and $lerp <= 1) {
        $x: $lerp * nth($size, 1);
        $intersections: append($intersections, (
          $x + $left,
          $y + $top
        ));
      }
    }
  }
  
  @return $intersections;
}

// RENDER A PATH
@function render-path($path, $size) {
  $shadows: ();
  
  @for $y from 0 through nth($size, 2) - 1 {
    $intersections: intersections($path, $y);
    $intersections: sort($intersections, compare);
    $draw: false;
    
    @for $n from 1 through length($intersections) {
      $draw: not $draw;
      
      @if $draw and length($intersections) > $n {
        $current: nth($intersections, $n);
        $next: nth($intersections, $n + 1);
        
        $from: round(max(nth($current, 1), 0));
        $to: round(min(nth($next, 1), nth($size, 1)));
        
        @for $x from $from through $to {
          $value: $x+0px $y+0px #f00;
          $shadows: append($shadows, $value, comma);
        }
      }
    }
  }
  
  @return $shadows;
}

// RENDER THE WHOLE THING
@mixin render($paths, $size) {
  $shadows: ();
  
  @for $n from 1 through length($paths) {
    $path: nth($paths, $n);
    $shadows: join($shadows, render-path($path, $size), comma);
  }
  
  background-color: transparent;
  box-shadow: $shadows;
  height: 1px;
  width: 1px;
}

// CREATE SHAPES
$square: (
  (0, 0), (1, 0),
  (1, 1), (0, 1)
);

$triangle: (
  (0.5, 0),
  (1, 1), (0, 1)
);

$concave: (
  (0, 0), (1, 0),
  (0.5, 0.5),
  (1, 1), (0, 1)
);

// CREATE PATHS
$paths: (
  // translate(scale($square, 20), 10, 10),
  scale($triangle, 20),
  // scale($concave, 50)
);

.output { @include render($paths, (100, 100)); }

SassMeister-output.css

List index is 2 but list is only 1 item long for `nth'

SassMeister-rendered.html

<div class="output"></div>