Skip to content

Instantly share code, notes, and snippets.

@veltman

veltman/index.html

Last active January 16, 2020 10:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save veltman/2cd093f397129593a5de to your computer and use it in GitHub Desktop.
Save veltman/2cd093f397129593a5de to your computer and use it in GitHub Desktop.
Download ZIP
NYC in CSS
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment