Last active
February 17, 2020 05:59
-
-
Save leyanlo/3200d6ace5f3aaa92ab43e0dc556fabf to your computer and use it in GitHub Desktop.
momwordcloud.svg
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Mom’s 70th</title> | |
| <style> | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| min-height: 100vh; | |
| font-family: 'Lato', sans-serif; | |
| font-weight: bold; | |
| background: black; | |
| color: white; | |
| margin: 0; | |
| } | |
| .cheers { | |
| width: 800px; | |
| height: 800px; | |
| font-size: 42px; | |
| position: absolute; | |
| pointer-events: none; | |
| filter: invert(100%); | |
| } | |
| .sun { | |
| position: absolute; | |
| } | |
| .wordCloud { | |
| width: 400px; | |
| height: 400px; | |
| filter: invert(100%); | |
| } | |
| .palmTree { | |
| position: absolute; | |
| height: 200px; | |
| left: calc(50% + 200px); | |
| top: 50%; | |
| filter: invert(100%); | |
| } | |
| .palmTree.-flip { | |
| transform: scaleX(-1); | |
| transform-origin: -100%; | |
| } | |
| .waves { | |
| position: absolute; | |
| height: 200px; | |
| left: calc(50% + 50px); | |
| top: calc(50% + 30px); | |
| transform: scale(0.6); | |
| filter: invert(100%); | |
| } | |
| .waves.-flip { | |
| transform: scale(-0.6, 0.6); | |
| transform-origin: -44%; | |
| } | |
| .carlsbad { | |
| font-size: 60px; | |
| margin-top: -10px; | |
| letter-spacing: 2px; | |
| } | |
| </style> | |
| <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <svg class="cheers" viewBox="0 0 500 500" | |
| xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <path id="curve" | |
| d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" | |
| fill="none"/> | |
| <text> | |
| <textPath xlink:href="#curve"> | |
| CHEERS TO 70 YEARS | |
| </textPath> | |
| </text> | |
| </svg> | |
| <!--<svg class="sun" width="600" height="600" xmlns="http://www.w3.org/2000/svg">--> | |
| <!--<path d="M100 100 A 50 50 0 1 0 26 101" fill="red" stroke="white"--> | |
| <!--stroke-width="5" stroke-linecap="round"/>--> | |
| <!--</svg>--> | |
| <img class="wordCloud" src="momwordcloud.svg"> | |
| <img class="palmTree" src="palm-tree.svg"> | |
| <img class="palmTree -flip" src="palm-tree.svg"> | |
| <img class="waves" src="ocean-waves.svg"> | |
| <img class="waves -flip" src="ocean-waves.svg"> | |
| <div class="carlsbad">CARLSBAD 2019</div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg enable-background="new 0 0 611.999 611.999" height="611.999" | |
| viewBox="0 0 611.999 611.999" width="611.999" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path d="m16.483 293.276c31.765 0 60.236-7.226 85.716-21.867 25.473-14.706 45.256-35.103 59.341-61.189 14.086 26.086 33.83 46.546 59.041 61.189 25.441 14.706 53.651 21.867 85.115 21.867h.601c31.471 0 59.643-7.226 85.121-21.867 25.473-14.706 45.256-35.103 59.041-61.189 14.086 26.086 34.169 46.483 59.642 61.189 25.474 14.642 53.945 21.867 85.415 21.867 9.29 0 16.483-7.481 16.483-16.816 0-9.271-7.193-16.432-16.483-16.432-31.771 0-59.341-9.016-82.717-26.982-23.376-18.031-38.664-42.263-45.556-72.57l-.602-.575c0-.575-.301-1.215-.901-1.79 0-.32-.595-.895-.595-1.215s-.301-.895-.602-1.215l-1.202-1.151c0-.895-.294-1.215-1.195-1.215 0-.32-.301-.895-.602-1.215l-1.797-1.215-1.202-.895c-.294 0-.895-.575-1.196-.575-.301-.32-.901-.575-1.797-.575l-.601-.639h-.602-2.097-1.797-1.202-1.797-.601l-.596.639c-.901 0-1.503.256-1.803.575-.301 0-.895.32-1.196.575-.3 0-1.503.895-1.797.895 0 .32-.3.639-.601.639l-.902.575-1.196 1.215-.601 1.215-1.202 1.151-.595 1.215c-.301.32-.602.895-.602 1.215-.3.256-.601.895-.601 1.79-.301 0-.602.32-.602.575-7.486 30.307-22.774 54.54-45.85 72.57-23.082 17.967-50.652 26.982-82.423 26.982-32.065 0-59.693-8.951-83.018-26.982-23.133-17.903-38.363-42.263-45.857-72.57v-.575c-.301-.32-.595-.895-.595-1.79-.301-.32-.601-.895-.601-1.215l-1.202-1.215c0-.256-.301-.895-.595-1.151l-1.202-1.215-1.196-1.215-1.503-1.215c-.301 0-.895-.256-1.196-.895-.301 0-1.503-.575-1.803-.575-.294-.32-.895-.575-1.196-.575s-.902-.639-1.202-.639h-.595-1.803-1.196-1.797-2.097-.601l-.601.639c-.902 0-1.496.256-1.797.575l-1.202.575c-.301 0-.895.895-1.196.895l-1.202 1.215c-.895 0-1.196.32-1.196 1.215l-1.202 1.215-1.196 1.151-.601 1.215c0 .575-1.496 1.79-1.496 3.005v.575c-7.494 30.307-22.832 54.476-46.157 72.57-23.133 17.903-50.652 26.982-82.717 26.982-9.277.001-16.47 7.162-16.47 16.432 0 9.335 7.193 16.817 16.483 16.817z"/> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment