Built with blockbuilder.org
Last active
April 26, 2019 15:20
-
-
Save marijer/6264eceec5e29a375151645485616231 to your computer and use it in GitHub Desktop.
fresh block
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
| license: mit |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { | |
| margin:0;position:fixed;top:0;right:0;bottom:0;left:0; | |
| } | |
| .ball { | |
| animation: move-ball 2s 2s infinite alternate ease-in-out forwards; | |
| } | |
| .waves { | |
| animation: move-waves 7s -5s linear infinite; | |
| } | |
| .fish { | |
| animation: move-waves 7s -5s linear infinite; | |
| } | |
| @keyframes move-waves { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes move-ball { | |
| 0% { | |
| fill: blue; | |
| transform: translateX(0); | |
| } | |
| 50% { | |
| fill: purple; | |
| transform: translateX(50px); | |
| } | |
| 100% { | |
| fill: red; | |
| transform: translateX(100px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <div> | |
| <svg width="372px" height="154px" viewBox="0 0 372 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch --> | |
| <desc>Created with Sketch.</desc> | |
| <defs> | |
| <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"> | |
| <stop stop-color="#A8BBEE" offset="0%"></stop> | |
| <stop stop-color="#6F86D9" offset="100%"></stop> | |
| </linearGradient> | |
| </defs> | |
| <g class='fish' id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |
| <g id="Artboard" transform="translate(0.000000, -83.000000)"> | |
| <g id="Group" transform="translate(75.609375, 217.195312) scale(-1, 1) translate(-75.609375, -217.195312) translate(35.609375, 197.195312)"> | |
| <path d="M35.9759659,6.51758935 C34.2387178,6.24009717 32.4468216,6.03505244 30.6204275,5.90286107 C30.4080944,1.96762036 30.3019279,0 30.3019279,0 C28.1183432,0.31949291 25.3701907,2.25604522 22.0574702,5.80965692 C21.7176069,5.8262358 21.3776256,5.8452037 21.0376442,5.86656298 C13.4460784,6.34350203 6.43353033,10.2186318 0,17.4919523 L3.8601182,19.4416598 L0,21.0689951 C8.23491882,28.5807852 15.2474669,32.4559149 21.0376442,32.6943845 C21.7040619,32.721831 22.3807065,32.7419067 23.0668804,32.7530763 C24.0878109,36.026891 25.5344638,38.3144488 27.4068392,39.6157497 C27.0651274,38.1908115 27.0259114,34.9438404 29.0297634,32.6044106 C35.8098961,32.1368082 43.2367467,30.5431191 50.7605543,26.6134116 C61.3758793,21.0689951 64.0779621,21.9632559 65.6220094,21.6055516 C66.5227036,27.6865244 71.0905101,31.0250978 79.325429,31.6212716 C73.7925929,28.9981068 70.5758277,25.0037423 69.6751335,19.638178 C68.3240921,11.5898316 79.4848353,6.37399219 79.325429,6.40311941 C70.1819691,8.07383988 65.6141625,11.5912654 65.6220094,16.9553959 C60.3465145,16.4784568 55.3926961,14.7197441 50.7605543,11.6792576 C48.6719095,10.3082944 46.182138,9.1716704 43.4118194,8.27181479 C42.3508813,6.13434413 44.1983534,1.78852143 44.1983534,1.78852143 C40.951955,2.01136063 38.2111592,3.5877166 35.9759659,6.51758935 Z" id="vis" fill="#7CC8F2"></path> | |
| <ellipse id="Oval-Copy" fill="#545454" cx="12.3523782" cy="16.0966929" rx="1.9300591" ry="1.78852143"></ellipse> | |
| </g> | |
| </g> | |
| <path class='waves' d="M0,64.8244629 C9.33333333,64.718244 15.6666667,61.6651345 19,55.6651345 C24,46.6651345 54.6479139,8.64240357 50,19.8244265 C43,36.6651345 44.9284984,61.2144647 94,55.6651345 C143.071502,50.1158043 167.767745,4.19405078 215,1.16513451 C262.232255,-1.86378176 259,37.6651345 327,46.6651345 C395,55.6651345 405.5,12 406,19.8244265 C406.659163,30.1395761 403.92459,41.5 420,41.5 C440,41.5 469,21.1488531 486,19.8244265 C503,18.5 509.55098,46.6651345 537.5,46.6651345 C565.44902,46.6651345 583,6.5 609.5,7.5 C621.664727,7.95904631 656.5,55.6651345 682.5,46.6651345 C706.502506,38.3565748 694.572901,65.3476809 738,64.8244629" id="Path-5-Copy" stroke="url(#linearGradient-1)"></path> | |
| </g> | |
| </svg> | |
| </div> | |
| <div> | |
| <svg width='80' height='80' viewbox='0 0 200, 70'> | |
| <circle cx='40' cy='0' r='25' class='ball' /> | |
| </svg> | |
| </div> | |
| <body> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment