Fix the flag of China stars rotating issue #11

1. Create helper function to link polygen points.
2. Draw five angle stars with polygen() for css clip-path.

Author: tao-guo

app/styles/_flags/bra.scss

@@ -78,7 +78,7 @@
   //   // top: ($height - $circle-width) / 2;
   //   // left: ($width - $circle-width) / 2;
   //   // background-color: $white;
-  //   clip-path: five-pointed-star($circle-width, 100px, 100px);
+  //   clip-path: polygon(five-pointed-star($circle-width, 100px, 100px));
   // }
 };
 

app/styles/_flags/chn.scss

@@ -6,20 +6,22 @@
   $red: #de2910;
   $yellow: #FDDA24;
   $star-size: 6 * $unit;
-  $star-offset-top: 5 * $unit;
-  $star-offset-left: 5 * $unit;
   $star-size-small: 2 * $unit;
-  $star-offset-top-small: 2 * $unit;
-  $star-offset-left-small: 10 * $unit;
 
   background-color: $red;
   &:before {
-    @include star($yellow, $star-size, $star-offset-left, $star-offset-top);
+    content: '';
+    display: block;
+    position: relative;
+    width: $width;
+    height: $height;
+    background: $yellow;
+    clip-path: polygon(link_list(
+      five-pointed-star($star-size, 5 * $unit, 5 * $unit),
+      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)
+    ));
   }
-  &:after {
-    @include star($yellow, $star-size-small, $star-offset-left-small, $star-offset-top-small);
-    text-shadow:(2 * $unit) (2 * $unit) 0px $yellow,
-                (2 * $unit) (5 * $unit) 0px $yellow,
-                (0) (7 * $unit) 0px $yellow;
-  }
-};
+};

app/styles/_helpers/helper.scss

@@ -5,6 +5,29 @@
     @return $value / ($value * 0 + 1);
 }
 
+// Link polygen point lists to a single one
+// @args: lists with positions
+// @returns: New single list which can be used in polygen()
+@function link_list($args...) {
+  $result: ();
+  $len: length($args);
+
+  @for $i from 1 to $len + 1 {
+    $list: nth($args, $i);
+    $result: append($result, $list, comma);
+  }
+
+  @if ($len <= 2) {
+    @return $result;
+  }
+
+  @for $i from $len - 1 to 1 {
+    $list: nth($args, $i);
+    $result: append($result, nth($list, 1), comma);
+  }
+  @return $result;
+}
+
 // Sets the flag ratio and update all magic variables
 // @args ratio: Ratio of height / width
 @mixin ratio($ratio:1) {

app/styles/_helpers/stars.scss

@@ -5,7 +5,8 @@
 // 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) {
+@function five-pointed-star($diameter, $left, $top, $rotate:0) {
+  $result: ();
   $radius: _($diameter / 2);
   $golden-ratio: 1.618;
   // There are two circles that make a five pointed star.
@@ -14,86 +15,15 @@
   // Both radius have a ratio equal to the golden ratio
   $inner-radius: $radius - $radius / $golden-ratio;
 
-  // Whatever the size of the star, the inner angle of the peaks is always 36°
-  $teta: 36deg;
-  // The other angles of the triangles are 72°
-  $beta: 72deg;
-  $pentagram-side: 2 * (sin($teta) * $inner-radius);
-  // teta is also equal to the angle from the center of the star to one inner
-  // peak and with a right angle to the base of one of the triangles
-  $inner-top-padding-x: $pentagram-side / 2;
-  $inner-top-padding-y: cos($teta) * $inner-radius;
-  $outer-top-padding-x: sqrt($radius * $radius - $inner-top-padding-y * $inner-top-padding-y);
-  $outer-top-padding-y: $inner-top-padding-y;
-  $inner-bottom-padding-x: ($pentagram-side / 2) + (cos($beta) * $pentagram-side);
-  $inner-bottom-padding-y: sqrt($inner-radius * $inner-radius - $inner-bottom-padding-x * $inner-bottom-padding-x);
-  $outer-bottom-padding-x: sin($teta) * $radius;
-  $outer-bottom-padding-y: cos($teta) * $radius;
-  
-  // We'll name the points of the star starting from the top and in clockwise
-  // order
-  $A-x: 0;
-  $A-y: -$radius;
-
-  $B-x: $inner-top-padding-x;
-  $B-y: -$inner-top-padding-y;
-
-  $C-x: $outer-top-padding-x;
-  $C-y: -$outer-top-padding-y;
-
-  $D-x: $inner-bottom-padding-x;
-  $D-y: $inner-bottom-padding-y;
-
-  $E-x: $outer-bottom-padding-x;
-  $E-y: $outer-bottom-padding-y;
-
-  $F-x: 0;
-  $F-y: $inner-radius;
-
-  $G-x: -$outer-bottom-padding-x;
-  $G-y: $outer-bottom-padding-y;
-
-  $H-x: -$inner-bottom-padding-x;
-  $H-y: $inner-bottom-padding-y;
-
-  $I-x: -$outer-top-padding-x;
-  $I-y: -$outer-top-padding-y;
-
-  $J-x: -$inner-top-padding-x;
-  $J-y: -$inner-top-padding-y;
-
-  // Converting to px and placing relative to origin
-  $A-x: $A-x * 1px + $left;
-  $A-y: $A-y * 1px + $top;
-  $B-x: $B-x * 1px + $left;
-  $B-y: $B-y * 1px + $top;
-  $C-x: $C-x * 1px + $left;
-  $C-y: $C-y * 1px + $top;
-  $D-x: $D-x * 1px + $left;
-  $D-y: $D-y * 1px + $top;
-  $E-x: $E-x * 1px + $left;
-  $E-y: $E-y * 1px + $top;
-  $F-x: $F-x * 1px + $left;
-  $F-y: $F-y * 1px + $top;
-  $G-x: $G-x * 1px + $left;
-  $G-y: $G-y * 1px + $top;
-  $H-x: $H-x * 1px + $left;
-  $H-y: $H-y * 1px + $top;
-  $I-x: $I-x * 1px + $left;
-  $I-y: $I-y * 1px + $top;
-  $J-x: $J-x * 1px + $left;
-  $J-y: $J-y * 1px + $top;
-
-  @return polygon(
-    $A-x $A-y,
-    $B-x $B-y,
-    $C-x $C-y,
-    $D-x $D-y,
-    $E-x $E-y,
-    $F-x $F-y,
-    $G-x $G-y,
-    $H-x $H-y,
-    $I-x $I-y,
-    $J-x $J-y
-  );
+  $ang: $rotate;
+  @for $i from 0 to 11 {
+    $r: $radius;
+    @if ($i % 2 == 1) {
+      $r: $inner-radius;
+    }
+    $result: append($result, ($left + $r * sin($ang) $top - $r * cos($ang)), comma);
+    $ang: $ang + 36;
+  }
+
+  @return $result;
 }