Skip to content

Instantly share code, notes, and snippets.

@leyanlo
Last active February 17, 2020 05:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leyanlo/3200d6ace5f3aaa92ab43e0dc556fabf to your computer and use it in GitHub Desktop.
Save leyanlo/3200d6ace5f3aaa92ab43e0dc556fabf to your computer and use it in GitHub Desktop.
momwordcloud.svg
<!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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1152px" height="1152px" xml:space="preserve">
<g id="cuckoo.jpg_(Break)">
<g id="Layer 209">
</g>
</g>
<g id="palmtree.jpg">
<g id="">
<path style="fill:rgb(0,0,0);" d="M 240.218 18.7589 C 235.549 19.5353 228.992 21.0538 225.648 22.1334 C 217.073 24.9011 203.398 31.9598 205.264 32.6554 C 206.087 32.9626 210.389 34.5341 214.823 36.1477 C 219.257 37.7612 227.234 41.1138 232.55 43.5978 C 237.866 46.0819 242.215 47.7125 242.215 47.2213 C 242.215 45.7574 238.037 34.8716 236.947 33.4958 C 236.392 32.796 236.173 31.9888 236.46 31.7021 C 237.342 30.8196 243.042 38.7063 246.461 45.539 C 249.462 51.5372 250.447 52.5192 259.575 58.6035 C 265.004 62.2218 269.854 64.9296 270.354 64.6209 C 271.233 64.0773 270.625 52.6734 269.514 48.8746 C 269.166 47.6853 269.36 47.2454 270.046 47.6692 C 271.34 48.4689 273.706 56.146 275.202 64.3974 C 276.112 69.4133 276.887 70.8964 279.975 73.5259 C 282.002 75.2527 287.653 80.4963 292.533 85.1784 L 301.405 93.6913 L 300.866 82.7056 C 300.326 71.72 300.326 71.72 302.077 75.7148 C 304.172 80.4967 305.823 87.5514 306.737 95.6345 C 307.369 101.212 307.991 102.333 317.007 114.106 L 326.605 126.639 L 326.902 120.413 C 327.065 116.989 326.789 111.931 326.287 109.172 C 325.558 105.161 325.629 104.366 326.641 105.206 C 328.478 106.731 331.856 120.389 332.666 129.567 C 333.257 136.274 333.914 138.352 336.975 143.197 C 338.961 146.341 341.559 150.645 342.748 152.761 L 344.91 156.609 L 346.061 153.621 C 346.694 151.977 347.709 146.809 348.315 142.136 C 349.28 134.701 349.53 134.014 350.311 136.635 C 350.802 138.283 350.964 145.996 350.672 153.776 C 350.259 164.765 350.453 168.552 351.544 170.753 C 352.316 172.312 353.424 174.85 354.006 176.393 C 355.319 179.877 356.453 179.228 359.462 173.266 C 366.822 158.683 368.729 132.061 363.772 113.115 C 354.063 76.0136 323.921 39.7618 290.481 24.9694 C 275.819 18.4837 256.344 16.0774 240.218 18.7589 L 240.218 18.7589 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 491.811 75.7003 C 454.746 82.7362 420.004 104.628 402.237 132.141 C 393.2 146.137 387.703 163.897 388.223 177.421 L 388.524 185.249 L 394.766 179.396 C 398.199 176.177 401.008 172.735 401.008 171.748 C 401.008 168.634 406.949 155.528 410.651 150.475 C 414.445 145.296 414.439 145.607 410.53 156.989 C 406.148 169.748 406.465 169.995 417.623 162.535 C 426.299 156.734 427.665 155.386 431.493 148.847 C 436.009 141.132 443.794 131.831 447.311 129.949 C 449.204 128.936 449.142 129.197 446.75 132.334 C 443.862 136.119 437.959 147.223 437.959 148.869 C 437.959 149.419 444.223 146.656 451.878 142.728 C 465.796 135.587 465.796 135.587 470.728 128.122 C 475.161 121.41 484.898 110.658 484.898 112.474 C 484.898 112.871 483.343 115.549 481.443 118.424 C 478.009 123.62 474.426 131.142 475.386 131.142 C 475.662 131.142 481.173 129.362 487.633 127.186 C 494.093 125.009 501.23 122.761 503.493 122.189 C 506.666 121.387 508.241 120.19 510.379 116.959 C 513.689 111.958 521.75 103.179 523.033 103.179 C 523.533 103.179 522.636 105.089 521.039 107.423 C 517.795 112.166 514.859 117.621 514.859 118.905 C 514.859 119.37 518.566 119.192 523.098 118.51 C 527.629 117.828 533.177 117.245 535.427 117.215 C 538.283 117.177 540.09 116.521 541.419 115.042 C 544.91 111.154 559.302 102.348 560.389 103.435 C 560.571 103.617 558.269 105.68 555.273 108.02 C 545.446 115.695 545.505 115.753 564.092 116.527 C 572.992 116.898 582.183 117.581 584.518 118.046 C 586.852 118.51 588.762 118.568 588.762 118.174 C 588.762 116.767 578.985 104.602 574.677 100.648 C 562.665 89.6265 549.203 81.7663 535.332 77.6763 C 524.039 74.3467 503.786 73.4271 491.811 75.7003 L 491.811 75.7003 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 201.534 128.577 C 191.115 130.554 183.861 132.936 174.979 137.298 C 164.131 142.625 158.936 146.341 150.835 154.571 C 141.869 163.677 135.298 173.376 130.407 184.72 C 126.915 192.821 124.469 201.051 125.555 201.051 C 125.779 201.051 129.537 199.304 133.905 197.168 C 138.273 195.032 146.453 191.583 152.083 189.503 C 157.713 187.423 162.32 185.411 162.32 185.033 C 162.32 184.655 159.736 183.233 156.577 181.873 C 145.303 177.018 145.259 176.982 151.334 177.626 C 154.355 177.946 160.107 179.307 164.115 180.65 C 171.404 183.092 171.404 183.092 179.096 181.173 C 183.326 180.117 188.698 178.95 191.032 178.579 C 193.367 178.209 195.277 177.608 195.277 177.244 C 195.277 176.477 187.187 169.408 183.386 166.852 C 181.961 165.895 181.372 165.108 182.077 165.104 C 184.019 165.094 193.211 169.924 198.284 173.62 C 202.789 176.902 202.789 176.902 211.7 175.923 C 216.6 175.385 224.124 175.088 228.419 175.264 C 232.714 175.44 236.227 175.309 236.225 174.972 C 236.223 174.242 228.156 166.724 223.233 162.861 C 220.031 160.349 219.967 160.202 222.457 161.075 C 229.23 163.45 236.742 168.013 243.466 173.836 C 246.14 176.152 248.206 177.082 250.673 177.082 C 252.575 177.082 259.14 177.781 265.263 178.635 C 271.385 179.489 276.681 179.901 277.031 179.551 C 277.658 178.924 269.305 170.719 263.606 166.366 C 260.691 164.138 260.691 164.138 263.403 165.08 C 270.648 167.594 278.659 172.649 285.385 178.949 C 288.539 181.904 290.821 182.851 300.364 185.169 C 306.556 186.673 311.768 187.758 311.947 187.579 C 312.613 186.912 309.118 181.376 304.214 175.334 C 301.428 171.901 299.424 169.093 299.76 169.093 C 301.821 169.093 311.297 177.588 316.397 184.006 C 321.648 190.617 323.148 191.845 328.369 193.81 C 331.652 195.046 334.741 196.057 335.234 196.057 C 337.775 196.057 331.121 180.658 324.709 171.696 C 313.442 155.95 295.987 142.896 276.184 135.405 C 261.513 129.856 250.182 127.988 228.733 127.583 C 214.552 127.315 206.663 127.603 201.534 128.577 L 201.534 128.577 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 367.842 192.007 C 359.765 194.573 355.607 201.018 356.255 209.969 C 356.918 219.145 361.956 224.169 371.163 224.835 C 377.608 225.301 382.961 222.993 386.526 218.211 C 389.558 214.145 389.37 202.736 386.198 198.289 C 382.335 192.873 374.047 190.037 367.842 192.007 L 367.842 192.007 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 445.785 200.525 C 429.746 203.153 414.05 209.633 402.263 218.494 C 396.04 223.172 389.778 229.809 390.494 230.967 C 390.702 231.304 394.015 231.688 397.857 231.82 C 404.167 232.038 405.453 231.728 411.164 228.618 C 418.128 224.826 428.933 221.025 432.747 221.025 C 434.425 221.025 432.703 222.272 427.27 224.991 C 418.73 229.266 414.675 232.627 417.1 233.421 C 417.862 233.67 422.795 234.618 428.064 235.528 C 437.408 237.142 437.815 237.131 444.688 235.085 C 453.334 232.51 466.16 230.795 468.978 231.837 C 470.603 232.438 469.447 232.997 463.75 234.365 C 455.384 236.372 448.587 239.55 450.942 240.352 C 451.766 240.632 455.137 241.591 458.432 242.482 C 461.728 243.373 467.899 245.205 472.146 246.554 C 479.867 249.006 479.867 249.006 487.106 247 C 491.724 245.72 497.246 245.013 502.355 245.048 L 510.365 245.103 L 503.374 246.956 C 499.529 247.975 495.191 249.27 493.733 249.835 C 490.712 251.006 489.09 252.983 491.15 252.983 C 491.907 252.983 498.918 256.145 506.73 260.009 C 520.102 266.624 521.151 266.975 524.637 266.008 C 530.746 264.314 544.258 263.452 543.418 264.811 C 543.026 265.446 542.013 265.966 541.169 265.966 C 538.997 265.966 529.633 268.796 527.842 269.994 C 526.543 270.863 526.59 271.141 528.19 272.081 C 529.206 272.678 533.753 275.97 538.295 279.395 C 546.432 285.532 546.668 285.632 554.425 286.238 C 561.786 286.812 568.296 288.33 570.045 289.88 C 570.461 290.249 566.641 290.359 561.556 290.126 C 556.471 289.892 552.534 289.942 552.809 290.237 C 553.084 290.532 558.574 296.219 565.009 302.875 C 571.444 309.531 577.495 316.308 578.457 317.936 C 579.418 319.563 580.521 320.894 580.908 320.894 C 582.192 320.894 583.043 307.769 582.488 296.524 C 581.311 272.683 572.69 253.051 556.123 236.485 C 530.243 210.604 481.407 194.688 445.785 200.525 L 445.785 200.525 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 331.889 210.006 C 324.49 212.296 320.113 218.438 320.113 226.533 C 320.113 239.213 333.335 246.991 344.879 241.102 C 355.436 235.716 355.976 218.39 345.779 212.192 C 341.934 209.856 335.597 208.858 331.889 210.006 L 331.889 210.006 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 250.439 216.528 C 233.684 219.565 218.847 225.856 202.477 236.863 C 193.282 243.046 179.343 255.34 172.296 263.482 C 148.416 291.072 141.542 324.663 152.877 358.374 C 155.43 365.967 160.505 376.05 161.315 375.138 C 161.713 374.69 163.255 370.954 164.742 366.834 C 166.229 362.714 169.789 354.499 172.653 348.577 C 177.86 337.81 177.86 337.81 174.833 338.469 C 173.169 338.832 169.379 340.2 166.411 341.509 C 155.168 346.469 161.629 340.858 174.646 334.358 C 181.135 331.118 183.174 329.528 185.234 326.102 C 186.638 323.768 189.763 319.098 192.178 315.724 L 196.57 309.589 L 186.186 310.152 C 176.302 310.688 175.97 310.643 179.296 309.209 C 183.386 307.446 194.574 304.957 198.522 304.932 C 200.033 304.923 201.269 304.483 201.269 303.954 C 201.269 303.425 206.449 297.749 212.781 291.341 L 224.293 279.689 L 213.184 280.147 C 203.512 280.545 202.402 280.432 204.607 279.277 C 207.929 277.537 218.068 275.302 226.386 274.477 C 231.885 273.931 233.69 273.261 236.873 270.586 C 238.987 268.808 244.519 264.697 249.166 261.449 C 257.616 255.545 257.616 255.545 254.16 254.805 C 250.985 254.124 242.293 254.447 236.223 255.47 C 234.584 255.747 235.147 255.223 237.864 253.947 C 243.439 251.326 254.985 248.988 262.35 248.988 C 266.692 248.988 269.125 248.452 271.071 247.067 C 272.555 246.01 277.028 243.377 281.011 241.216 C 288.239 237.294 288.247 237.285 285.457 236.21 C 281.541 234.702 272.773 233.022 268.382 232.939 C 265.405 232.882 265.075 232.702 266.683 232.01 C 269.403 230.842 287.714 230.837 292.649 232.004 C 296.016 232.8 297.704 232.536 303.385 230.324 C 307.093 228.881 310.126 227.373 310.126 226.974 C 310.126 225.713 305.211 222.962 298.314 220.363 C 284.705 215.235 265.887 213.728 250.439 216.528 L 250.439 216.528 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 361.209 231.707 C 350.821 236.825 349.612 253.244 359.124 260.018 C 367.796 266.193 379.649 263.293 384.618 253.782 C 386.716 249.767 386.386 242.409 383.912 238.007 C 379.834 230.75 369.162 227.789 361.209 231.707 L 361.209 231.707 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 317.016 260.953 C 267.536 311.891 225.466 388.471 201.79 470.698 C 183.42 534.501 168.731 631.985 164.32 719.373 C 162.566 754.128 163.343 807.515 165.916 828.98 L 166.545 834.223 L 204.38 834.223 C 228.277 834.223 242.215 833.864 242.215 833.25 C 242.215 832.714 240.676 826.086 238.794 818.519 C 224.543 761.213 217.35 685.533 220.163 622.5 C 223.911 538.515 238.422 467.462 266.095 397.605 C 286.256 346.71 314.96 293.793 341.227 259.095 C 343.904 255.558 345.953 252.524 345.781 252.352 C 345.374 251.945 331.328 248.988 329.803 248.988 C 329.162 248.988 323.408 254.372 317.016 260.953 L 317.016 260.953 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 396.014 251.572 C 396.014 251.894 398.374 254.518 401.257 257.402 C 405.824 261.969 407.402 262.867 413.491 264.364 C 421.332 266.292 429.779 269.879 433.652 272.926 C 436.834 275.428 436.37 275.442 429.189 273.059 C 426.048 272.016 421.028 270.838 418.032 270.441 C 411.768 269.609 411.414 268.315 420.981 281.212 C 425.843 287.764 427.342 289.036 434.016 292.268 C 440.585 295.45 455.695 306.487 454.76 307.422 C 454.576 307.606 450.321 305.715 445.305 303.22 C 440.288 300.724 435.687 298.849 435.078 299.052 C 434.443 299.265 436.133 303.016 439.049 307.866 C 441.841 312.51 445.203 318.437 446.52 321.037 C 448.553 325.049 449.994 326.33 456.05 329.512 C 459.974 331.574 465.614 335.482 468.583 338.195 C 474.277 343.399 475.106 345.561 470.019 341.939 C 467.029 339.81 460.4 336.676 456.282 335.446 C 454.277 334.846 454.398 335.418 458.085 343.972 C 460.259 349.015 463.015 356.266 464.208 360.086 C 466.225 366.542 466.696 367.195 470.894 369.359 C 475.559 371.764 486.34 380.706 485.539 381.506 C 485.29 381.755 483.301 380.832 481.119 379.454 C 476.306 376.416 469.794 373.616 469.116 374.293 C 468.844 374.565 469.334 378.279 470.204 382.545 C 471.074 386.812 472.072 392.056 472.423 394.199 C 472.865 396.902 474.586 399.827 478.044 403.756 C 483.369 409.805 488.553 417.768 487.167 417.768 C 486.706 417.768 483.887 415.296 480.903 412.275 C 477.92 409.254 475.238 406.782 474.945 406.782 C 474.652 406.782 474.412 415.994 474.412 427.254 C 474.412 438.514 474.719 447.615 475.094 447.478 C 477.712 446.523 490.22 433.965 495.074 427.419 C 518.239 396.175 519.814 358.841 499.67 318.415 C 482.689 284.335 458.173 262.255 427.611 253.516 C 420.469 251.474 416.565 250.986 407.387 250.986 C 401.132 250.986 396.014 251.249 396.014 251.572 L 396.014 251.572 "/>
</g>
<g id="">
<path style="fill:rgb(0,0,0);" d="M 364.617 289.685 C 365.562 297.383 366.42 299.397 370.944 304.536 C 375.143 309.306 382.393 322.308 381.818 324.035 C 381.62 324.627 380.251 323.368 378.776 321.238 C 377.3 319.109 374.058 315.37 371.572 312.93 L 367.052 308.494 L 367.052 320.071 C 367.052 331.639 367.055 331.655 371.169 339.874 C 375.551 348.63 378.033 356.448 377.984 361.341 C 377.957 363.967 377.671 363.658 375.669 358.845 C 372.892 352.166 368.384 344.863 367.039 344.863 C 366.497 344.863 366.011 347.222 365.959 350.106 C 365.906 352.99 365.331 359.843 364.68 365.336 C 363.496 375.323 363.496 375.323 366.741 382.314 C 369.983 389.301 373.044 399.444 373.044 403.202 C 373.044 404.298 370.909 400.945 368.3 395.752 C 365.691 390.558 363.145 386.309 362.641 386.309 C 362.138 386.309 361.09 389.455 360.314 393.3 C 359.537 397.144 357.608 404.312 356.027 409.228 C 353.153 418.166 353.153 418.166 355.122 422.618 C 357.335 427.619 360.08 437.565 360.025 440.382 C 360.005 441.402 358.486 439.09 356.648 435.245 C 353.015 427.643 350.158 423.423 350.106 425.581 C 350.088 426.308 347.873 431.545 345.183 437.22 C 340.293 447.536 340.293 447.536 340.787 457.869 C 341.076 463.923 340.853 469.235 340.248 470.698 C 339.217 473.191 339.215 473.191 339.152 470.116 C 339.06 465.629 336.939 455.718 336.072 455.718 C 335.663 455.718 333.366 458.744 330.967 462.442 C 328.568 466.14 323.347 473.345 319.364 478.452 C 315.382 483.559 312.124 487.949 312.124 488.206 C 312.124 489.3 321.016 488.529 330.365 486.623 C 360.729 480.436 383.2 463.379 396.739 436.243 C 408.004 413.664 413.221 382.044 409.966 356.08 C 406.477 328.261 391.143 300.849 371.868 287.978 C 368.545 285.758 365.395 283.943 364.869 283.943 C 364.288 283.943 364.189 286.2 364.617 289.685 L 364.617 289.685 "/>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment