<div class="flag pride-of-africa" role="img" aria-label="Pride of Africa Flag. Colorful cubist design divided in 6 columns and 2 rows with shapes that forms the letters 'Pride of africa'"></div>

.flag {
  width: 80vmin;
  aspect-ratio: 70 / 45;
}

.flag.pride-of-africa {
  background: 
    /* P */
    radial-gradient(farthest-side at 0 50%, #e80000 99.9999%, #0000 0) 9% 0 / 8.4% 25%,
    linear-gradient(#fa4aa7 0 0) 0 0 / 8.3333% 25%,
    linear-gradient(90deg, #e80000 50%, #ffc621 0) 0 0 / 16.6666% 50%,
    /* R */
    radial-gradient(farthest-side at 0 50%, #ff9a0b 99.9999%, #0000 0) 27.3333% 0 / 8.3333% 25%,
    linear-gradient(#fd4603 0 0) 0 0 / 25.3333% 25%,
    linear-gradient(45deg, #fd4603 50%, #fbe10c 0) 0 0 / 33.3333% 50%,
    /* I */
    conic-gradient(at 50% 0, #0000 37.5%, #038b2a 0 62.5%, #0000 0) 40.6666% 4% / 12% 9%,
    conic-gradient(at 50% 100%, #038b2a 12.5%, #0000 0 87.5%, #038b2a 0) 40.6666% 13.6666% / 12% 9%,
    linear-gradient(#ffc621 0 0) 0 0 / 50% 25%,
    linear-gradient(90deg, #ff9a0b 75%, #038b2a 0 91.6666%, #ff9a0b 0) 0 0 / 50% 50%,
    /* D */
    radial-gradient(farthest-side, #f94ca8 55%, #e80000 0 99.9999%, #15b1da 0) 50% 0 / 33.3333% 50%,
    /* E */
    conic-gradient(#0000 243.5deg, #6c38c6 0 296.5deg, #0000 0) 100% 0 / 33.3333% 50%,
    linear-gradient(#6c38c6 25%, #f94ca8 0 75%, #6c38c6 0) 0 0 / 83.3333% 50%,
    /* of */
    radial-gradient(farthest-side, #ff7002 50%, #ffc310 0 99.9999%, #01b92f 0) 100% 0 / 16.6666% 25%,
    linear-gradient(90deg, #e80000 50%, #0000 0) 100% 0 / 16.6666% 50%,
    repeating-linear-gradient(#f94ca8 0 12.5%, #ffc310 0 25%) 100% 0 / 16.6666% 50%,
    /* A */
    conic-gradient(#f94ca8 166deg, #2e73ec 0 194deg, #f94ca8 0) 0 100% / 16.6666% 100%,
    /* F */
    linear-gradient(90deg, #6c38c6 75%, #0000 0) 0 100% / 33.3333% 50%,
    linear-gradient(#7c62e1 12.5%, #ff9a0b 0 25%, #7c62e1 0 37.5%, #ff9a0b 0 50%, #ffc621 0) 0 100% / 33.3333% 50%,
    /* R */
    radial-gradient(farthest-side at 0 50%, #f94ca8 99.9999%, #05acd9 0) 45.5555% 66.6666% / 8.3333% 25%,
    linear-gradient(#e80000 75%, #0000 0) 0 100% / 41.75% 100%,
    linear-gradient(225deg, #05acd9 50%, #e80000 0) 0 100% / 50% 75%,
    /* A */
    conic-gradient(#0ab730 166deg, #6c38c6 0 194deg, #0ab730 0) 100% 100% / 16.6666% 100%,
    /* C */
    radial-gradient(farthest-side, #f94ca8 55%, #ffc621 0 99.9999%, #038b2a 0) 100% 100% / 33.3333% 50%,
    /* I */
    conic-gradient(at 50% 0, #0000 160deg, #2e73ec 0 200deg, #0000 0) 59.1666% 60% / 10% 10%,
    conic-gradient(at 0 0, #2e73ec 120deg, #0000 0) 56.6666% 66.6666% / 7% 10%,
    conic-gradient(at 100% 0, #0000 240deg, #2e73ec 0) 61% 66.6666% / 7% 10%,
    conic-gradient(at 0 100%, #0000 25deg, #2e73ec 0 55deg, #0000 0) 57.5% 66.6666% / 6% 9%,
    conic-gradient(at 100% 100%, #0000 305deg, #2e73ec 0 335deg, #0000 0) 60% 66.6666% / 6% 9%,
    linear-gradient(#ffc621 75%, #0000 0),
    linear-gradient(90deg, #fbe10c 54.1666%, #2e73ec 0 62.5%, #fbe10c 0)
    ;
  background-repeat: no-repeat;
}