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);
    
    @if nth($a, 2) > nth($b, 2) {
      $t: $a;
      $a: $b;
      $b: $t;
    }
    
    $top: min(nth($a, 2), nth($b, 2));
    $bottom: max(nth($a, 2), nth($b, 2));
    $left: min(nth($a, 1), nth($b, 1));
    
    // Only run if y is within boundaries
    @if $top <= $y and $bottom > $y {
      $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, 128),
  // scale($concave, 50)
);

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

SassMeister-output.css

.output {
  background-color: transparent;
  box-shadow: 0px 0px #f00, 1px 0px #f00, 2px 0px #f00, 3px 0px #f00, 4px 0px #f00, 5px 0px #f00, 6px 0px #f00, 7px 0px #f00, 8px 0px #f00, 9px 0px #f00, 10px 0px #f00, 1px 1px #f00, 2px 1px #f00, 3px 1px #f00, 4px 1px #f00, 5px 1px #f00, 6px 1px #f00, 7px 1px #f00, 8px 1px #f00, 9px 1px #f00, 10px 1px #f00, 11px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 2px #f00, 4px 2px #f00, 5px 2px #f00, 6px 2px #f00, 7px 2px #f00, 8px 2px #f00, 9px 2px #f00, 10px 2px #f00, 11px 2px #f00, 2px 3px #f00, 3px 3px #f00, 4px 3px #f00, 5px 3px #f00, 6px 3px #f00, 7px 3px #f00, 8px 3px #f00, 9px 3px #f00, 10px 3px #f00, 11px 3px #f00, 12px 3px #f00, 2px 4px #f00, 3px 4px #f00, 4px 4px #f00, 5px 4px #f00, 6px 4px #f00, 7px 4px #f00, 8px 4px #f00, 9px 4px #f00, 10px 4px #f00, 11px 4px #f00, 12px 4px #f00, 3px 5px #f00, 4px 5px #f00, 5px 5px #f00, 6px 5px #f00, 7px 5px #f00, 8px 5px #f00, 9px 5px #f00, 10px 5px #f00, 11px 5px #f00, 12px 5px #f00, 13px 5px #f00, 3px 6px #f00, 4px 6px #f00, 5px 6px #f00, 6px 6px #f00, 7px 6px #f00, 8px 6px #f00, 9px 6px #f00, 10px 6px #f00, 11px 6px #f00, 12px 6px #f00, 13px 6px #f00, 4px 7px #f00, 5px 7px #f00, 6px 7px #f00, 7px 7px #f00, 8px 7px #f00, 9px 7px #f00, 10px 7px #f00, 11px 7px #f00, 12px 7px #f00, 13px 7px #f00, 14px 7px #f00, 4px 8px #f00, 5px 8px #f00, 6px 8px #f00, 7px 8px #f00, 8px 8px #f00, 9px 8px #f00, 10px 8px #f00, 11px 8px #f00, 12px 8px #f00, 13px 8px #f00, 14px 8px #f00, 5px 9px #f00, 6px 9px #f00, 7px 9px #f00, 8px 9px #f00, 9px 9px #f00, 10px 9px #f00, 11px 9px #f00, 12px 9px #f00, 13px 9px #f00, 14px 9px #f00, 15px 9px #f00, 5px 10px #f00, 6px 10px #f00, 7px 10px #f00, 8px 10px #f00, 9px 10px #f00, 10px 10px #f00, 11px 10px #f00, 12px 10px #f00, 13px 10px #f00, 14px 10px #f00, 15px 10px #f00, 6px 11px #f00, 7px 11px #f00, 8px 11px #f00, 9px 11px #f00, 10px 11px #f00, 11px 11px #f00, 12px 11px #f00, 13px 11px #f00, 14px 11px #f00, 15px 11px #f00, 16px 11px #f00, 6px 12px #f00, 7px 12px #f00, 8px 12px #f00, 9px 12px #f00, 10px 12px #f00, 11px 12px #f00, 12px 12px #f00, 13px 12px #f00, 14px 12px #f00, 15px 12px #f00, 16px 12px #f00, 7px 13px #f00, 8px 13px #f00, 9px 13px #f00, 10px 13px #f00, 11px 13px #f00, 12px 13px #f00, 13px 13px #f00, 14px 13px #f00, 15px 13px #f00, 16px 13px #f00, 17px 13px #f00, 7px 14px #f00, 8px 14px #f00, 9px 14px #f00, 10px 14px #f00, 11px 14px #f00, 12px 14px #f00, 13px 14px #f00, 14px 14px #f00, 15px 14px #f00, 16px 14px #f00, 17px 14px #f00, 8px 15px #f00, 9px 15px #f00, 10px 15px #f00, 11px 15px #f00, 12px 15px #f00, 13px 15px #f00, 14px 15px #f00, 15px 15px #f00, 16px 15px #f00, 17px 15px #f00, 18px 15px #f00, 8px 16px #f00, 9px 16px #f00, 10px 16px #f00, 11px 16px #f00, 12px 16px #f00, 13px 16px #f00, 14px 16px #f00, 15px 16px #f00, 16px 16px #f00, 17px 16px #f00, 18px 16px #f00, 9px 17px #f00, 10px 17px #f00, 11px 17px #f00, 12px 17px #f00, 13px 17px #f00, 14px 17px #f00, 15px 17px #f00, 16px 17px #f00, 17px 17px #f00, 18px 17px #f00, 19px 17px #f00, 9px 18px #f00, 10px 18px #f00, 11px 18px #f00, 12px 18px #f00, 13px 18px #f00, 14px 18px #f00, 15px 18px #f00, 16px 18px #f00, 17px 18px #f00, 18px 18px #f00, 19px 18px #f00, 10px 19px #f00, 11px 19px #f00, 12px 19px #f00, 13px 19px #f00, 14px 19px #f00, 15px 19px #f00, 16px 19px #f00, 17px 19px #f00, 18px 19px #f00, 19px 19px #f00, 20px 19px #f00;
  height: 1px;
  width: 1px;
}

SassMeister-rendered.html

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