[GH-ISSUE #983] Wrong flag for Myanmar (MM) #464

Closed
opened 2026-03-03 14:38:34 +03:00 by kerem · 2 comments
Owner

Originally created by @angpng on GitHub (Jun 11, 2022).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/983

Wrong star. See National Symbols (in English)

Try this

<path fill="#fff" d="M320 80 L216 400.07908786622636 L488.27553482998906 202.2593324768344 L151.72446517001094 202.2593324768344 L424 400.07908786622636 Z"/>
Originally created by @angpng on GitHub (Jun 11, 2022). Original GitHub issue: https://github.com/lipis/flag-icons/issues/983 Wrong star. See [National Symbols](https://myanmar.gov.mm/national-symbols) (in English) Try this ```xml <path fill="#fff" d="M320 80 L216 400.07908786622636 L488.27553482998906 202.2593324768344 L151.72446517001094 202.2593324768344 L424 400.07908786622636 Z"/> ```
kerem closed this issue 2026-03-03 14:38:34 +03:00
Author
Owner

@angpng commented on GitHub (Jun 15, 2022):

That star still looks weird.

You have drawn an isosceles triangle with a height of 1 and a base of 0.6, so its top angle should be 33.40 degrees.

(Math.atan(0.3/1) * 180 / Math.PI) * 2
// 33.39848846798724

I think the star should be a regular pentagram. The angles formed at each of the five points of a regular pentagram have equal measures of 36°. I calculated the coordinates of all five points using trigonometric functions.

const sin = (degree) => Math.sin(degree * Math.PI / 180)
const cos = (degree) => Math.cos(degree * Math.PI / 180)

const generateDOfPentagram = (cx, cy, r) => {
    // cx, cy, r of the circumcircle
    // Top / Bottom left / Top right / Top left / Bottom right
    return `M${cx} ${cy - r} L${cx - sin(36) * r} ${cy + cos(36) * r} L${cx + sin(72) * r} ${cy - cos(72) * r} L${cx - sin(72) * r} ${cy - cos(72) * r} L${cx + sin(36) * r} ${cy + cos(36) * r} Z`;
}

generateDOfPentagram(0, 0, 1)
// "M0 -1 L-0.5877852522924731 0.8090169943749475 L0.9510565162951535 -0.30901699437494745 L-0.9510565162951535 -0.30901699437494745 L0.5877852522924731 0.8090169943749475 Z"

so, here is my solution:

<path fill="#fff" d="M0 -1 L-0.5877852522924731 0.8090169943749475 L0.9510565162951535 -0.30901699437494745 L-0.9510565162951535 -0.30901699437494745 L0.5877852522924731 0.8090169943749475 Z" transform="translate(320 256.93536813722) scale(176.93536813722432)" />

or just change the base to 0.6498393924658126 (2×tan18°).

BTW, the defs tag in the mm.svg file is not used.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-mm" viewBox="0 0 640 480">
  <path id="rect2" fill="#fecb00" d="M0 0h640v480H0z" style="stroke-width:37.7124"/>
  <path id="rect4" fill="#34b233" d="M0 160h640v320H0z" style="stroke-width:37.7124"/>
  <path id="rect6" fill="#ea2839" d="M0 320h640v160H0z" style="stroke-width:37.7124"/>
<!--
  <path  fill="#fff" d="M0 -1 L-0.5877852522924731 0.8090169943749475 L0.9510565162951535 -0.30901699437494745 L-0.9510565162951535 -0.30901699437494745 L0.5877852522924731 0.8090169943749475 Z" transform="translate(320 256.93536813722) scale(176.93536813722432)" />
-->
  <g id="g17" transform="translate(320 256.9) scale(176.87999)">
    <path id="pt" fill="#fff" d="m0-1 .325 1h-.65z"/>
    <use xlink:href="#pt" id="use9" width="100%" height="100%" x="0" y="0" transform="rotate(-144)"/>
    <use xlink:href="#pt" id="use11" width="100%" height="100%" x="0" y="0" transform="rotate(-72)"/>
    <use xlink:href="#pt" id="use13" width="100%" height="100%" x="0" y="0" transform="rotate(72)"/>
    <use xlink:href="#pt" id="use15" width="100%" height="100%" x="0" y="0" transform="rotate(144)"/>
  </g>
</svg>
<!-- gh-comment-id:1156465419 --> @angpng commented on GitHub (Jun 15, 2022): That star still looks weird. You have drawn an isosceles triangle with a height of 1 and a base of 0.6, so its top angle should be 33.40 degrees. ```js (Math.atan(0.3/1) * 180 / Math.PI) * 2 // 33.39848846798724 ``` I think the star should be a regular pentagram. The angles formed at each of the five points of a regular pentagram have equal measures of 36°. I calculated the coordinates of all five points using trigonometric functions. ```js const sin = (degree) => Math.sin(degree * Math.PI / 180) const cos = (degree) => Math.cos(degree * Math.PI / 180) const generateDOfPentagram = (cx, cy, r) => { // cx, cy, r of the circumcircle // Top / Bottom left / Top right / Top left / Bottom right return `M${cx} ${cy - r} L${cx - sin(36) * r} ${cy + cos(36) * r} L${cx + sin(72) * r} ${cy - cos(72) * r} L${cx - sin(72) * r} ${cy - cos(72) * r} L${cx + sin(36) * r} ${cy + cos(36) * r} Z`; } generateDOfPentagram(0, 0, 1) // "M0 -1 L-0.5877852522924731 0.8090169943749475 L0.9510565162951535 -0.30901699437494745 L-0.9510565162951535 -0.30901699437494745 L0.5877852522924731 0.8090169943749475 Z" ``` so, here is my solution: ```xml <path fill="#fff" d="M0 -1 L-0.5877852522924731 0.8090169943749475 L0.9510565162951535 -0.30901699437494745 L-0.9510565162951535 -0.30901699437494745 L0.5877852522924731 0.8090169943749475 Z" transform="translate(320 256.93536813722) scale(176.93536813722432)" /> ``` or just change the base to 0.6498393924658126 (2×tan18°). BTW, the defs tag in the mm.svg file is not used. ```xml <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-mm" viewBox="0 0 640 480"> <path id="rect2" fill="#fecb00" d="M0 0h640v480H0z" style="stroke-width:37.7124"/> <path id="rect4" fill="#34b233" d="M0 160h640v320H0z" style="stroke-width:37.7124"/> <path id="rect6" fill="#ea2839" d="M0 320h640v160H0z" style="stroke-width:37.7124"/> <!-- <path fill="#fff" d="M0 -1 L-0.5877852522924731 0.8090169943749475 L0.9510565162951535 -0.30901699437494745 L-0.9510565162951535 -0.30901699437494745 L0.5877852522924731 0.8090169943749475 Z" transform="translate(320 256.93536813722) scale(176.93536813722432)" /> --> <g id="g17" transform="translate(320 256.9) scale(176.87999)"> <path id="pt" fill="#fff" d="m0-1 .325 1h-.65z"/> <use xlink:href="#pt" id="use9" width="100%" height="100%" x="0" y="0" transform="rotate(-144)"/> <use xlink:href="#pt" id="use11" width="100%" height="100%" x="0" y="0" transform="rotate(-72)"/> <use xlink:href="#pt" id="use13" width="100%" height="100%" x="0" y="0" transform="rotate(72)"/> <use xlink:href="#pt" id="use15" width="100%" height="100%" x="0" y="0" transform="rotate(144)"/> </g> </svg> ```
Author
Owner

@lipis commented on GitHub (Jun 16, 2022):

I took it from Wikipedia and updated the flag from there... I think you went too far.. :)

<!-- gh-comment-id:1157305909 --> @lipis commented on GitHub (Jun 16, 2022): I took it from Wikipedia and updated the flag from there... I think you went too far.. :)
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/flag-icons#464
No description provided.