NYC in CSS

<!DOCTYPE html>
<meta charset="utf-8">
<style>

div {
    position: absolute;
    width: 99vw;
    height: 99vw;
  }

.StatenIsland {
    background-color: #66c2a5;
  }

.Manhattan {
    background-color: #fc8d62;
  }

.Queens {
    background-color: #8da0cb;
  }

.Bronx {
    background-color: #e78ac3;
  }

.Brooklyn {
    background-color: #a6d854;
  }

.StatenIsland { -webkit-clip-path: polygon(32% 63%, 34% 65%, 34% 69%, 37% 73%, 37% 74%, 33% 79%, 30% 82%, 28% 85%, 24% 87%, 23% 86%, 22% 88%, 19% 90%, 16% 92%, 15% 92%, 13% 94%, 11% 94%, 9% 96%, 7% 96%, 5% 97%, 4% 97%, 3% 95%, 4% 92%, 5% 90%, 4% 87%, 7% 84%, 10% 84%, 11% 78%, 11% 76%, 12% 75%, 12% 73%, 12% 67%, 14% 64%, 16% 64%, 18% 65%, 20% 66%, 23% 65%, 25% 65%, 27% 64%, 30% 64%); }
  .Manhattan.p1 { -webkit-clip-path: polygon(60% 29%, 60% 29%, 61% 30%, 61% 30%, 59% 33%, 57% 32%, 58% 30%, 59% 28%, 59% 28%); }
  .Manhattan.p2 { -webkit-clip-path: polygon(59% 11%, 61% 12%, 61% 14%, 59% 17%, 57% 21%, 57% 27%, 58% 29%, 58% 30%, 56% 33%, 56% 34%, 51% 42%, 50% 44%, 51% 45%, 50% 49%, 47% 50%, 44% 51%, 43% 50%, 44% 47%, 44% 40%, 47% 36%, 52% 25%, 55% 21%, 55% 19%, 55% 17%, 56% 17%); }
  .Queens.p1 { -webkit-clip-path: polygon(70% 61%, 71% 60%, 69% 56%, 69% 53%, 66% 55%, 64% 55%, 63% 54%, 62% 52%, 61% 51%, 59% 49%, 59% 48%, 58% 45%, 57% 45%, 56% 43%, 53% 42%, 56% 36%, 57% 35%, 59% 34%, 62% 31%, 63% 31%, 65% 33%, 67% 33%, 71% 35%, 70% 37%, 72% 38%, 73% 37%, 72% 35%, 72% 33%, 70% 32%, 72% 30%, 74% 30%, 75% 30%, 77% 29%, 78% 30%, 81% 30%, 81% 31%, 83% 31%, 84% 30%, 85% 32%, 87% 36%, 89% 33%, 97% 40%, 98% 43%, 96% 45%, 92% 47%, 93% 49%, 93% 56%, 93% 60%, 93% 62%, 90% 64%, 90% 66%, 86% 68%, 85% 69%, 84% 68%, 83% 70%, 82% 72%, 80% 71%, 81% 69%, 82% 69%, 83% 67%, 82% 66%, 77% 64%, 77% 63%, 74% 63%, 72% 64%); }
  .Queens.p2 { -webkit-clip-path: polygon(86% 71%, 87% 72%, 90% 71%, 91% 74%, 90% 75%, 88% 76%, 84% 76%, 78% 78%, 66% 83%, 63% 84%, 56% 87%, 56% 85%, 59% 83%, 61% 82%, 63% 82%, 64% 81%, 67% 81%, 72% 78%, 74% 78%, 77% 77%, 79% 76%, 80% 74%, 82% 75%, 84% 72%); }
  .Queens.p3 { -webkit-clip-path: polygon(74% 71%, 75% 69%, 75% 67%, 76% 66%, 78% 72%, 77% 75%, 75% 75%, 77% 72%, 76% 71%); }
  .Bronx.p1 { -webkit-clip-path: polygon(68% 32%, 65% 32%, 64% 30%, 65% 29%, 68% 31%); }
  .Bronx.p2 { -webkit-clip-path: polygon(82% 16%, 84% 18%, 82% 18%); }
  .Bronx.p3 { -webkit-clip-path: polygon(68% 5%, 70% 6%, 71% 4%, 73% 5%, 74% 8%, 82% 10%, 83% 13%, 81% 17%, 80% 15%, 78% 16%, 77% 17%, 78% 19%, 78% 20%, 78% 23%, 80% 26%, 78% 26%, 75% 27%, 74% 26%, 70% 28%, 69% 26%, 68% 29%, 66% 28%, 65% 28%, 63% 28%, 61% 30%, 60% 29%, 60% 29%, 59% 28%, 59% 28%, 58% 27%, 57% 21%, 58% 19%, 61% 14%, 62% 13%, 61% 12%, 59% 11%, 62% 3%); }
  .Brooklyn.p1 { -webkit-clip-path: polygon(69% 70%, 67% 69%, 69% 68%); }
  .Brooklyn.p2 { -webkit-clip-path: polygon(59% 48%, 59% 49%, 61% 51%, 62% 52%, 63% 54%, 64% 55%, 66% 55%, 69% 53%, 69% 56%, 71% 60%, 70% 61%, 70% 62%, 71% 63%, 71% 64%, 67% 66%, 64% 69%, 64% 73%, 61% 73%, 62% 74%, 66% 73%, 67% 77%, 67% 79%, 64% 79%, 63% 77%, 61% 77%, 61% 75%, 59% 74%, 59% 74%, 61% 77%, 61% 78%, 59% 78%, 58% 78%, 58% 80%, 56% 80%, 47% 81%, 44% 80%, 45% 78%, 46% 78%, 46% 76%, 45% 74%, 41% 73%, 39% 71%, 39% 67%, 40% 64%, 41% 64%, 45% 59%, 43% 57%, 43% 56%, 44% 55%, 46% 52%, 47% 50%, 51% 50%, 51% 48%, 52% 47%, 53% 43%, 54% 43%, 56% 43%, 57% 45%, 58% 45%); }

</style>
<body>
  <div class="StatenIsland"></div>
  <div class="Manhattan p1"></div><div class="Manhattan p2"></div>
  <div class="Queens p1"></div><div class="Queens p2"></div><div class="Queens p3"></div>
  <div class="Bronx p1"></div><div class="Bronx p2"></div><div class="Bronx p3"></div>
  <div class="Brooklyn p1"></div><div class="Brooklyn p2"></div>