February 20, 2018 01:05 · Feb 20, 2018
diff --git a/fractal-tree.markdown b/fractal-tree.markdown
@@ -0,0 +1,7 @@
+Fractal tree
+------------
+another simple fractal tree
+
+A [Pen](https://codepen.io/libertario/pen/aqYzGK) by [Libertar.io](https://codepen.io/libertario) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/libertario/pen/aqYzGK/license).
diff --git a/index.pug b/index.pug
@@ -0,0 +1,11 @@
+mixin nesting(n)
+  if n > 0
+    div(class=`_${n%2}`)
+      +nesting(n - 1)
+    div(class=`_${n%2}`)
+      +nesting(n - 1)
+
+- depth = 11  
+
+section
+  +nesting(depth)
diff --git a/style.scss b/style.scss
@@ -0,0 +1,65 @@
+$c: #F00;
+$f: 4000px;
+$s: 30;
+$r1: 0.7;
+$r2: 0.98;
+$st: 4px;
+
+body {
+  margin: 0;
+  overflow: hidden;
+  background: #fff;
+  height: 100vh;
+  transform: scale(0.025);
+  transform-origin: 50% 100%;
+}
+
+section {
+  font-size: $f;
+  $w: 8em/$s;
+  $h: 1em;
+  height: $h;
+  width: $w;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  margin-left: $w/-2;
+  background: mix($c,black,10%);
+  box-shadow: 
+    $st 0 0 0 mix($c,black,40%),
+    $st*-1 0 0 0 mix($c,black,40%);
+
+}
+
+div {
+  font-size: 1em*$r1;
+  position: absolute;
+  bottom: calc(100% - 0.1em);
+  width: 100%*$r1;
+  background: inherit;
+  box-shadow: inherit;
+
+
+  &:nth-child(1) {
+    left: 0;
+    transform-origin: 0 100%;
+    transform: rotate(-35deg);
+    &._1 {
+      height: 100%*$r1;
+    }
+    &._0 {
+      height: 100%*$r2;
+    }
+  }
+  &:nth-child(2) {
+    right: 0;
+    transform-origin: 100% 100%;
+    transform: rotate(25deg);
+    &._1 {
+      height: 100%*$r2;
+    }
+    &._0 {
+      height: 100%*$r1;
+    }
+  }
+}