Generated by SassMeister.com.

SassMeister-input-HTML.html

<mandelbrot-set></mandelbrot-set>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

$data: ()!global;
@mixin mandelbrot($img-width, $img-height, $iterations: 20, $center-x: -0.7, $center-y: 0, $width: 3) {
  $height: $width * $img-height / $img-width;
  $x-start: $center-x - $width / 2;
  $y-start: $center-y - $height / 2;
  $x-scale: $width / $img-width;
  $y-scale: $height / $img-height;
  @for $xpx from 0 to $img-width {
    @for $ypx from 0 to $img-height {
      $x: $x-start + $xpx * $x-scale;
      $y: $y-start + $ypx * $y-scale;
      $x0: $x;
      $y0: $y;
      $i: 0;
      @while $x * $x + $y * $y < 2 * 2 and $i < $iterations {
        $xtemp: $x * $x - $y * $y + $x0;
        $y: 2 * $x * $y + $y0;
        $x: $xtemp;
        $i: $i + 1;
      }
      @if $i == $iterations {
        $data: append($data, $xpx*1px $ypx*1px 0 black,comma)!global;
        }
      @else {
        $data: append($data, $xpx*1px $ypx*1px 0 hsl(360*$i/$iterations, 100,50),comma)!global;
      }
    }
  }
}


mandelbrot-set {
  @include mandelbrot(10, 10);
  height: 1px;
  width: 1px;
  position: absolute;
  top: 40px;
  left: 40px;
  box-shadow: $data;
}
  

SassMeister-output.css

mandelbrot-set {
  height: 1px;
  width: 1px;
  position: absolute;
  top: 40px;
  left: 40px;
  box-shadow: 0px 0px 0 red, 0px 1px 0 red, 0px 2px 0 red, 0px 3px 0 red, 0px 4px 0 red, 0px 5px 0 red, 0px 6px 0 red, 0px 7px 0 red, 0px 8px 0 red, 0px 9px 0 red, 1px 0px 0 red, 1px 1px 0 red, 1px 2px 0 red, 1px 3px 0 #ff4d00, 1px 4px 0 #ff9900, 1px 5px 0 black, 1px 6px 0 #ff9900, 1px 7px 0 #ff4d00, 1px 8px 0 red, 1px 9px 0 red, 2px 0px 0 red, 2px 1px 0 red, 2px 2px 0 #ff9900, 2px 3px 0 #ff9900, 2px 4px 0 #ffe500, 2px 5px 0 black, 2px 6px 0 #ffe500, 2px 7px 0 #ff9900, 2px 8px 0 #ff9900, 2px 9px 0 red, 3px 0px 0 #ff4d00, 3px 1px 0 #ff4d00, 3px 2px 0 #ff9900, 3px 3px 0 #ff9900, 3px 4px 0 #33ff00, 3px 5px 0 black, 3px 6px 0 #33ff00, 3px 7px 0 #ff9900, 3px 8px 0 #ff9900, 3px 9px 0 #ff4d00, 4px 0px 0 #ff4d00, 4px 1px 0 #ff9900, 4px 2px 0 #ff9900, 4px 3px 0 #ffe500, 4px 4px 0 black, 4px 5px 0 black, 4px 6px 0 black, 4px 7px 0 #ffe500, 4px 8px 0 #ff9900, 4px 9px 0 #ff9900, 5px 0px 0 #ff4d00, 5px 1px 0 #ff9900, 5px 2px 0 #ffe500, 5px 3px 0 #80ff00, 5px 4px 0 black, 5px 5px 0 black, 5px 6px 0 black, 5px 7px 0 #80ff00, 5px 8px 0 #ffe500, 5px 9px 0 #ff9900, 6px 0px 0 #ff4d00, 6px 1px 0 #ff9900, 6px 2px 0 #ccff00, 6px 3px 0 black, 6px 4px 0 black, 6px 5px 0 black, 6px 6px 0 black, 6px 7px 0 black, 6px 8px 0 #ccff00, 6px 9px 0 #ff9900, 7px 0px 0 #ff4d00, 7px 1px 0 #ff9900, 7px 2px 0 black, 7px 3px 0 black, 7px 4px 0 black, 7px 5px 0 black, 7px 6px 0 black, 7px 7px 0 black, 7px 8px 0 black, 7px 9px 0 #ff9900, 8px 0px 0 #ff4d00, 8px 1px 0 #ff4d00, 8px 2px 0 #ffe500, 8px 3px 0 #00b2ff, 8px 4px 0 black, 8px 5px 0 black, 8px 6px 0 black, 8px 7px 0 #00b2ff, 8px 8px 0 #ffe500, 8px 9px 0 #ff4d00, 9px 0px 0 #ff4d00, 9px 1px 0 #ff4d00, 9px 2px 0 #ff9900, 9px 3px 0 #ffe500, 9px 4px 0 #80ff00, 9px 5px 0 #ccff00, 9px 6px 0 #80ff00, 9px 7px 0 #ffe500, 9px 8px 0 #ff9900, 9px 9px 0 #ff4d00; }

SassMeister-rendered.html

<mandelbrot-set></mandelbrot-set>