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, 32),
  // scale($concave, 50)
);

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

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, 11px 0px #f00, 12px 0px #f00, 13px 0px #f00, 14px 0px #f00, 15px 0px #f00, 16px 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, 12px 1px #f00, 13px 1px #f00, 14px 1px #f00, 15px 1px #f00, 16px 1px #f00, 17px 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, 12px 2px #f00, 13px 2px #f00, 14px 2px #f00, 15px 2px #f00, 16px 2px #f00, 17px 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, 13px 3px #f00, 14px 3px #f00, 15px 3px #f00, 16px 3px #f00, 17px 3px #f00, 18px 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, 13px 4px #f00, 14px 4px #f00, 15px 4px #f00, 16px 4px #f00, 17px 4px #f00, 18px 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, 14px 5px #f00, 15px 5px #f00, 16px 5px #f00, 17px 5px #f00, 18px 5px #f00, 19px 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, 14px 6px #f00, 15px 6px #f00, 16px 6px #f00, 17px 6px #f00, 18px 6px #f00, 19px 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, 15px 7px #f00, 16px 7px #f00, 17px 7px #f00, 18px 7px #f00, 19px 7px #f00, 20px 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, 15px 8px #f00, 16px 8px #f00, 17px 8px #f00, 18px 8px #f00, 19px 8px #f00, 20px 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, 16px 9px #f00, 17px 9px #f00, 18px 9px #f00, 19px 9px #f00, 20px 9px #f00, 21px 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, 16px 10px #f00, 17px 10px #f00, 18px 10px #f00, 19px 10px #f00, 20px 10px #f00, 21px 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, 17px 11px #f00, 18px 11px #f00, 19px 11px #f00, 20px 11px #f00, 21px 11px #f00, 22px 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, 17px 12px #f00, 18px 12px #f00, 19px 12px #f00, 20px 12px #f00, 21px 12px #f00, 22px 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, 18px 13px #f00, 19px 13px #f00, 20px 13px #f00, 21px 13px #f00, 22px 13px #f00, 23px 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, 18px 14px #f00, 19px 14px #f00, 20px 14px #f00, 21px 14px #f00, 22px 14px #f00, 23px 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, 19px 15px #f00, 20px 15px #f00, 21px 15px #f00, 22px 15px #f00, 23px 15px #f00, 24px 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, 19px 16px #f00, 20px 16px #f00, 21px 16px #f00, 22px 16px #f00, 23px 16px #f00, 24px 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, 20px 17px #f00, 21px 17px #f00, 22px 17px #f00, 23px 17px #f00, 24px 17px #f00, 25px 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, 20px 18px #f00, 21px 18px #f00, 22px 18px #f00, 23px 18px #f00, 24px 18px #f00, 25px 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, 21px 19px #f00, 22px 19px #f00, 23px 19px #f00, 24px 19px #f00, 25px 19px #f00, 26px 19px #f00, 10px 20px #f00, 11px 20px #f00, 12px 20px #f00, 13px 20px #f00, 14px 20px #f00, 15px 20px #f00, 16px 20px #f00, 17px 20px #f00, 18px 20px #f00, 19px 20px #f00, 20px 20px #f00, 21px 20px #f00, 22px 20px #f00, 23px 20px #f00, 24px 20px #f00, 25px 20px #f00, 26px 20px #f00, 11px 21px #f00, 12px 21px #f00, 13px 21px #f00, 14px 21px #f00, 15px 21px #f00, 16px 21px #f00, 17px 21px #f00, 18px 21px #f00, 19px 21px #f00, 20px 21px #f00, 21px 21px #f00, 22px 21px #f00, 23px 21px #f00, 24px 21px #f00, 25px 21px #f00, 26px 21px #f00, 27px 21px #f00, 11px 22px #f00, 12px 22px #f00, 13px 22px #f00, 14px 22px #f00, 15px 22px #f00, 16px 22px #f00, 17px 22px #f00, 18px 22px #f00, 19px 22px #f00, 20px 22px #f00, 21px 22px #f00, 22px 22px #f00, 23px 22px #f00, 24px 22px #f00, 25px 22px #f00, 26px 22px #f00, 27px 22px #f00, 12px 23px #f00, 13px 23px #f00, 14px 23px #f00, 15px 23px #f00, 16px 23px #f00, 17px 23px #f00, 18px 23px #f00, 19px 23px #f00, 20px 23px #f00, 21px 23px #f00, 22px 23px #f00, 23px 23px #f00, 24px 23px #f00, 25px 23px #f00, 26px 23px #f00, 27px 23px #f00, 28px 23px #f00, 12px 24px #f00, 13px 24px #f00, 14px 24px #f00, 15px 24px #f00, 16px 24px #f00, 17px 24px #f00, 18px 24px #f00, 19px 24px #f00, 20px 24px #f00, 21px 24px #f00, 22px 24px #f00, 23px 24px #f00, 24px 24px #f00, 25px 24px #f00, 26px 24px #f00, 27px 24px #f00, 28px 24px #f00, 13px 25px #f00, 14px 25px #f00, 15px 25px #f00, 16px 25px #f00, 17px 25px #f00, 18px 25px #f00, 19px 25px #f00, 20px 25px #f00, 21px 25px #f00, 22px 25px #f00, 23px 25px #f00, 24px 25px #f00, 25px 25px #f00, 26px 25px #f00, 27px 25px #f00, 28px 25px #f00, 29px 25px #f00, 13px 26px #f00, 14px 26px #f00, 15px 26px #f00, 16px 26px #f00, 17px 26px #f00, 18px 26px #f00, 19px 26px #f00, 20px 26px #f00, 21px 26px #f00, 22px 26px #f00, 23px 26px #f00, 24px 26px #f00, 25px 26px #f00, 26px 26px #f00, 27px 26px #f00, 28px 26px #f00, 29px 26px #f00, 14px 27px #f00, 15px 27px #f00, 16px 27px #f00, 17px 27px #f00, 18px 27px #f00, 19px 27px #f00, 20px 27px #f00, 21px 27px #f00, 22px 27px #f00, 23px 27px #f00, 24px 27px #f00, 25px 27px #f00, 26px 27px #f00, 27px 27px #f00, 28px 27px #f00, 29px 27px #f00, 30px 27px #f00, 14px 28px #f00, 15px 28px #f00, 16px 28px #f00, 17px 28px #f00, 18px 28px #f00, 19px 28px #f00, 20px 28px #f00, 21px 28px #f00, 22px 28px #f00, 23px 28px #f00, 24px 28px #f00, 25px 28px #f00, 26px 28px #f00, 27px 28px #f00, 28px 28px #f00, 29px 28px #f00, 30px 28px #f00, 15px 29px #f00, 16px 29px #f00, 17px 29px #f00, 18px 29px #f00, 19px 29px #f00, 20px 29px #f00, 21px 29px #f00, 22px 29px #f00, 23px 29px #f00, 24px 29px #f00, 25px 29px #f00, 26px 29px #f00, 27px 29px #f00, 28px 29px #f00, 29px 29px #f00, 30px 29px #f00, 31px 29px #f00, 15px 30px #f00, 16px 30px #f00, 17px 30px #f00, 18px 30px #f00, 19px 30px #f00, 20px 30px #f00, 21px 30px #f00, 22px 30px #f00, 23px 30px #f00, 24px 30px #f00, 25px 30px #f00, 26px 30px #f00, 27px 30px #f00, 28px 30px #f00, 29px 30px #f00, 30px 30px #f00, 31px 30px #f00, 16px 31px #f00, 17px 31px #f00, 18px 31px #f00, 19px 31px #f00, 20px 31px #f00, 21px 31px #f00, 22px 31px #f00, 23px 31px #f00, 24px 31px #f00, 25px 31px #f00, 26px 31px #f00, 27px 31px #f00, 28px 31px #f00, 29px 31px #f00, 30px 31px #f00, 31px 31px #f00, 32px 31px #f00;
  height: 1px;
  width: 1px;
}

SassMeister-rendered.html

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