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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment