Adding comments on the clever way to draw stars

Author: pixelastic

app/assets/fonts/Symbols.ttf

@@ -431,7 +431,7 @@ <h1 class="c-header__title"><a href="https://pixelastic.github.io/css-flags/">CS
             </a>
           </div>
           <div class="c-flaglist--item c-flaglist--item__hard">
-            <a href="https://github.com/pixelastic/css-flags/blob/master/app/styles/_flags/ic".scss">
+            <a href="https://github.com/pixelastic/css-flags/blob/master/app/styles/_flags/ic.scss">
               <div class="c-flaglist--showcase">
                 <div class="c-flaglist--showcase-inner">
                   <div class="c-flag c-flag__ic"></div>

app/assets/fonts/Symbols.woff

@@ -6,6 +6,8 @@
   $red: #de2910;
   $yellow: #FDDA24;
   $star-size: 6 * $unit;
+  $star-offset-top: 5 * $unit;
+  $star-offset-left: 5 * $unit;
   $star-size-small: 2 * $unit;
 
   background-color: $red;
@@ -16,12 +18,12 @@
     width: $width;
     height: $height;
     background: $yellow;
-    clip-path: polygon(link_list(
-      five-pointed-star($star-size, 5 * $unit, 5 * $unit),
+    clip-path: polygon(link_polygons(
+      five-pointed-star($star-size, $star-offset-left, $star-offset-top),
       five-pointed-star($star-size-small, 10 * $unit, 2 * $unit, -120.96),
       five-pointed-star($star-size-small, 12 * $unit, 4 * $unit, -98.13),
       five-pointed-star($star-size-small, 12 * $unit, 7 * $unit, -74.055),
       five-pointed-star($star-size-small, 10 * $unit, 9 * $unit, -54.34)
     ));
   }
-};
+};

app/assets/index.html

@@ -5,10 +5,12 @@
     @return $value / ($value * 0 + 1);
 }
 
-// Link polygen point lists to a single one
+// Link polygon point lists to a single one
 // @args: lists with positions
-// @returns: New single list which can be used in polygen()
-@function link_list($args...) {
+// @returns: New single list which can be used in polygon()
+// Inspired by:
+// https://css-tricks.com/cutting-inner-part-element-using-clip-path/
+@function link_polygons($args...) {
   $result: ();
   $len: length($args);
 

app/styles/_flags/chn.scss

@@ -2,27 +2,29 @@
 // @args size: Diameter of the circle in which the star is
 // @args left: X coord of the star center
 // @args top: Y coord of the star center
+// @args rotate: Angle to rotate the star
 // http://www.mathalino.com/sites/default/files/images/005-planegeom-pentagram.jpg
 // http://musicians4freedom.com/wp-content/uploads/2014/06/phi-dimentions-in-pentagram_0.gif
 //
-@function five-pointed-star($diameter, $left, $top, $rotate:0) {
+@function five-pointed-star($diameter, $left, $top, $alpha:0) {
   $result: ();
-  $radius: _($diameter / 2);
+  $whole-radius: _($diameter / 2);
   $golden-ratio: 1.618;
   // There are two circles that make a five pointed star.
   // A outer circle, where all the peaks are located
   // And an inner circle, where all the inner bases are located
   // Both radius have a ratio equal to the golden ratio
-  $inner-radius: $radius - $radius / $golden-ratio;
+  $inner-radius: $whole-radius - $whole-radius / $golden-ratio;
 
-  $ang: $rotate;
   @for $i from 0 to 11 {
-    $r: $radius;
+    $radius: $whole-radius;
     @if ($i % 2 == 1) {
-      $r: $inner-radius;
+      $radius: $inner-radius;
     }
-    $result: append($result, ($left + $r * sin($ang) $top - $r * cos($ang)), comma);
-    $ang: $ang + 36;
+    $result: append($result, 
+                    ($left + $radius * sin($alpha) $top - $radius * cos($alpha)), 
+                    comma);
+    $alpha: $alpha + 36;
   }
 
   @return $result;

app/styles/_helpers/helper.scss

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

app/styles/_helpers/stars.scss

@@ -51,7 +51,7 @@
     "phantomcss": "^0.11.0",
     "postcss-brunch": "^0.5.0",
     "postcss-round-subpixels": "^1.2.0",
-    "sass-brunch": "^1.9.0",
+    "sass-brunch": "^2.10.4",
     "svg2ttf": "4.0.1",
     "svgicons2svgfont": "^5.0.0",
     "to-factory": "^1.0.0",