Как воссоздать форму звезды/пентаграммы с помощью SVG и CSS [закрыто] ⇐ Html

[Anonymous]

Я пытаюсь воссоздать флаг Эфиопии с помощью SVG и CSS, но не могу создать среднюю часть флага — форму звездной пентаграммы.
Звезда внутри круга выглядит не так, как ожидалось.

Код: Выделить всё

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.flag {
width: 450px;
height: 300px;
position: relative;
/* Green, Yellow, Red stripes using linear gradient */
background: linear-gradient(
to bottom,
#078900 0%,     /* Green */
#078900 33.33%,
#fddc12 33.33%,   /* Yellow */
#fddc12 66.66%,
#e4032d 66.66%,   /* Red */
#e4032d 100%
);
border: 1px solid #333;
}

.emblem {
/* Position and size of the emblem container */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 40%;
}

/* Ensures the SVG scales correctly within the .emblem container */
.emblem svg {
width: 100%;
height: 100%;
display: block;
}

Код: Выделить всё

Accurate Ethiopian Flag

Мой результат:


Ожидаемый результат:



Подробнее здесь: https://stackoverflow.com/questions/798 ... vg-and-css