Skip to content

Instantly share code, notes, and snippets.

@0xm0
Created February 11, 2020 23:23
Show Gist options
  • Save 0xm0/48e5badbd0964040236a70b32c1b3002 to your computer and use it in GitHub Desktop.
Save 0xm0/48e5badbd0964040236a70b32c1b3002 to your computer and use it in GitHub Desktop.
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
:root {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
*,
:before,
:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
-ms-box-sizing: inherit;
-o-box-sizing: inherit;
box-sizing: inherit;
}
html, body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
html {
overflow: hidden;
}
body {
margin: 0;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch;
-ms-overflow-scrolling: touch;
-o-overflow-scrolling: touch;
overflow-scrolling: touch;
-ms-overflow-style: ms-autohiding-scrollbar;
}
#page-wrap {
position: relative;
display: block;
clear: both;
background: none;
color: #000;
text-decoration: none;
padding: 3rem 0;
width: 100%;
height: 100%;
}
#inner-wrap {
position: absolute;
top: 3rem;
left: 0;
right: 0;
bottom: 3rem;
display: table;
width: 100%;
height: 100%;
min-height: 322px;
overflow: visible;
}
.logo {
position: absolute;
z-index: 1;
top: 3rem;
left: 2rem;
display: block;
width: 9vmax;
height: 9vmax;
min-width: 50px;
min-height: 50px;
}
.waves {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
min-width: 100%;
min-height: 70%;
margin: auto 0;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 83%;
height: 100%;
margin: auto;
}
img, svg {
display: block;
overflow: visible;
pointer-events: none;
}
.group:before,
.group:after {
content: "";
display: table;
clear: both;
}
.group {
zoom: 1;
}
.credits {
position: relative;
z-index: 9;
font-size: 130%;
text-align: center;
width: 100%;
padding: 2rem 0;
}
.credits a {
display: inline-block;
color: #df1888;
font-family: Arial, sans-serif;
line-height: 1.5em;
text-decoration: none !important;
white-space: nowrap;
margin: 0 1.2em;
padding: 0.6em 0;
transition: 150ms;
}
.credits a:hover {
color: #2d71b9;
cursor: pointer;
}
.credits-logo {
fill: currentColor;
display: inline-block;
vertical-align: bottom;
width: 1.6em;
height: 1.6em;
margin: 0 0.5em 0 0;
}
</style>
<script>
var cpCreditsUrl = "https://gnet0";
var cpCreditsTitle = "🌈 Sexy Animated Rainbow Waves Header";
</script>
</head>
<body>
<a class="group" id="page-wrap" href="https://gnet0.com/" target="_blank" rel="external noopener"><div id="inner-wrap"><svg class="waves" xmlns="http://www.w3.org/2000/svg" width="1440" height="321.75" viewBox="0 0 960 214.5" preserveAspectRatio="xMinYMid meet"><defs><style>.waves&gt;path{-webkit-animation:a 17390ms ease-in-out infinite alternate-reverse both;-moz-animation:a 17390ms ease-in-out infinite alternate-reverse both;-ms-animation:a 17390ms ease-in-out infinite alternate-reverse both;-o-animation:a 17390ms ease-in-out infinite alternate-reverse both;animation:a 17390ms ease-in-out infinite alternate-reverse both;-webkit-animation-timing-function:cubic-bezier(.25,0,.75,1);-moz-animation-timing-function:cubic-bezier(.25,0,.75,1);-ms-animation-timing-function:cubic-bezier(.25,0,.75,1);-o-animation-timing-function:cubic-bezier(.25,0,.75,1);animation-timing-function:cubic-bezier(.25,0,.75,1);-webkit-will-change:transform;-moz-will-change:transform;-ms-will-change:transform;-o-will-change:transform;will-change:transform}.waves&gt;path:nth-of-type(1){-webkit-animation-duration:20580ms;-moz-animation-duration:20580ms;-ms-animation-duration:20580ms;-o-animation-duration:20580ms;animation-duration:20580ms}.waves&gt;path:nth-of-type(2){-webkit-animation-delay:-2690ms;-moz-animation-delay:-2690ms;-ms-animation-delay:-2690ms;-o-animation-delay:-2690ms;animation-delay:-2690ms;-webkit-animation-duration:13580ms;-moz-animation-duration:13580ms;-ms-animation-duration:13580ms;-o-animation-duration:13580ms;animation-duration:13580ms}g&gt;path:nth-of-type(1){-webkit-animation-delay:-820ms;-moz-animation-delay:-820ms;-ms-animation-delay:-820ms;-o-animation-delay:-820ms;animation-delay:-820ms;-webkit-animation-duration:10730ms;-moz-animation-duration:10730ms;-ms-animation-duration:10730ms;-o-animation-duration:10730ms;animation-duration:10730ms}.waves&gt;path:nth-of-type(1),g&gt;path:nth-of-type(2){-webkit-animation-direction:alternate;-moz-animation-direction:alternate;-ms-animation-direction:alternate;-o-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes a{0%{-webkit-transform:translateX(-750px);transform:translateX(-750px)}100%{-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@-moz-keyframes a{0%{-moz-transform:translateX(-750px);transform:translateX(-750px)}100%{-moz-transform:translateX(-20px);transform:translateX(-20px)}}@-ms-keyframes a{0%{-ms-transform:translateX(-750px);transform:translateX(-750px)}100%{-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-o-keyframes a{0%{-o-transform:translateX(-750px);transform:translateX(-750px)}100%{-o-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes a{0%{-webkit-transform:translateX(-750px);-moz-transform:translateX(-750px);-ms-transform:translateX(-750px);-o-transform:translateX(-750px);transform:translateX(-750px)}100%{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);-o-transform:translateX(-20px);transform:translateX(-20px)}}</style><linearGradient id="a"><stop stop-color="#00A8DE"></stop><stop offset="0.2" stop-color="#333391"></stop><stop offset="0.4" stop-color="#E91388"></stop><stop offset="0.6" stop-color="#EB2D2E"></stop></linearGradient></defs><path fill="url(#a)" d="M2662.6 1S2532 41.2 2435 40.2c-19.6-.2-37.3-1.3-53.5-2.8 0 0-421.3-59.4-541-28.6-119.8 30.6-206.2 75.7-391 73.3-198.8-2-225.3-15-370.2-50-145-35-218 37-373.3 36-19.6 0-37.5-1-53.7-3 0 0-282.7-36-373.4-38C139 26 75 46-1 46v106c17-1.4 20-2.3 37.6-1.2 130.6 8.4 210 56.3 287 62.4 77 6 262-25 329.3-23.6 67 1.4 107 22.6 193 23.4 155 1.5 249-71 380-62.5 130 8.5 209 56.3 287 62.5 77 6 126-18 188-18 61.4 0 247-38 307.4-46 159.3-20 281.2 29 348.4 30 67 2 132.2 6 217.4 7 39.3 0 87-11 87-11V1z"></path><path fill="#F2F5F5" d="M2663.6 73.2S2577 92 2529 89c-130.7-8.5-209.5-56.3-286.7-62.4s-125.7 18-188.3 18c-5 0-10-.4-14.5-.7-52-5-149.2-43-220.7-39-31.7 2-64 14-96.4 30-160.4 80-230.2-5.6-340.4-18-110-12-146.6 20-274 36S820.4 0 605.8 0C450.8 0 356 71 225.2 62.2 128 56 60.7 28-.3 11.2V104c22 7.3 46 14.2 70.4 16.7 110 12.3 147-19.3 275-35.5s350 39.8 369 43c27 4.3 59 8 94 10 13 .5 26 1 39 1 156 2 250-70.3 381-62 130.5 8.2 209.5 56.3 286.7 62 77 6.4 125.8-18 188.3-17.5 5 0 10 .2 14.3.6 52 5 145 49.5 220.7 38.2 32-5 64-15 96.6-31 160.5-79.4 230.3 6 340 18.4 110 12 146.3-20 273.7-36l15.5-2V73l1-.5z"></path><g fill="none" stroke="#E2E9E9" stroke-width="1"><path d="M0 51.4c3.4.6 7.7 1.4 11 2.3 133.2 34 224.3 34 308.6 34 110.2 0 116.7 36.6 229.8 26 113-11 128.7-44 222-42.6C865 73 889 38 1002 27c113-10.8 119.6 25.6 229.8 25.6 84.4 0 175.4 0 308.6 34 133 34.2 277-73 379.4-84.3 204-22.5 283.6 128.7 283.6 128.7"></path><path d="M0 6C115.7-6 198.3 76.6 308 76.6c109.6 0 131.8-20 223-28.3 114.3-10.2 238.2 0 238.2 0s124 10.2 238.3 0c91-8.2 113.2-28 223-28S1425 103 1541 91c115.8-11.8 153.3-69 269.3-84.6 116-15.5 198.4 71 308 71 109.8 0 131.8-20 223-28 114-10.2 237.7 0 237.7 0s37.4 2.4 82.8 3.7"></path></g></svg><svg class="text" xmlns="http://www.w3.org/2000/svg" width="1440" height="321.75" viewBox="0 0 1440 321.8" preserveAspectRatio="xMidYMid meet" aria-label="Hello, World!"><path d="M240.8 223h-33v-53.4H151V223h-33.2V88H151v52.5h56.8V88.1h33V223zM363.2 180.7H289c1.3 6 4 10.6 7.8 14.2 4 3.6 8.6 5.3 14 5.3 10 0 17.2-3.9 21.5-11.6l28.6 5.8a48.4 48.4 0 0 1-27.3 27.6 59.7 59.7 0 0 1-43.3.2 49.6 49.6 0 0 1-28.8-28.2 56.2 56.2 0 0 1-4.1-21.6c0-7.6 1.4-14.7 4.1-21.4a49.8 49.8 0 0 1 28.9-28.2 55 55 0 0 1 40.5-.2 49 49 0 0 1 27.8 28 60 60 0 0 1 4.4 21.8v8.3zM298 149.4c-4 2.9-6.8 6.7-8.3 11.6h41.7c-1.5-5.1-4-9-7.8-11.8-3.7-2.8-7.9-4.1-12.6-4.1s-9 1.4-13 4.3zM379.7 223V78h32.2v145h-32.2zM435 223V78h32.3v145H435zM557 121.8c6.2 1.7 12.4 5 18.8 9.8 6.3 4.8 11 11 14.4 18.3a54.9 54.9 0 0 1 .6 44c-3 6.6-7 12.3-12.1 17.1a59 59 0 0 1-56.6 12.3c-6.2-1.7-12.5-5-19-9.8-6.3-4.8-11.1-11-14.4-18.4a55.2 55.2 0 0 1-.6-44c2.9-6.6 6.9-12.2 12-17a54.2 54.2 0 0 1 18-11 61.2 61.2 0 0 1 39-1.3zm-7.2 74.4a26 26 0 0 0 14.3-23.8c0-7.5-2.5-13.7-7.4-18.7s-10.5-7.4-17-7.4c-4 0-8 1-12 3.2-4 2.1-7.2 5.3-9.5 9.6a27.8 27.8 0 0 0 .9 28.2 23 23 0 0 0 10.2 8.9c3.8 1.6 7.3 2.4 10.4 2.4 3 0 6.3-.8 10-2.4zM595 249.6l12-58h35.6v.8l-23.2 57.2h-24.3zM850.1 223h-35.6L792 139.6 769.2 223h-35.4L695.3 88h34l23.6 85 23.2-85h31.6l23.1 85 23.6-85h34.2L850 223zM958.9 121.8c6.1 1.7 12.4 5 18.7 9.8 6.3 4.8 11 11 14.4 18.3a54.9 54.9 0 0 1 .6 44c-3 6.6-7 12.3-12.1 17.1a59 59 0 0 1-56.6 12.3c-6.2-1.7-12.5-5-18.9-9.8s-11.2-11-14.5-18.4a55.6 55.6 0 0 1-.6-44c2.9-6.6 7-12.2 12-17a54.2 54.2 0 0 1 18.1-11 61.2 61.2 0 0 1 38.9-1.3zm-7.3 74.4a26 26 0 0 0 14.3-23.8c0-7.5-2.4-13.7-7.3-18.7-5-5-10.6-7.4-17-7.4-4 0-8.1 1-12.1 3.2-4 2.1-7.2 5.3-9.5 9.6a27.8 27.8 0 0 0 1 28.2 23 23 0 0 0 10 8.9c4 1.6 7.5 2.4 10.5 2.4s6.3-.8 10.1-2.4zM1087.7 121.3l-1.4 32.2h-5.9c-23.2 0-34.8 12.6-34.8 37.9V223h-32.2V122h32.2v19.2c2.8-4.5 6.2-8.5 10-11.8a33 33 0 0 1 12.6-7c4.4-1.2 8.5-1.9 12.2-1.9 2.7 0 5.1.3 7.3.8zM1101.2 223V78h32.2v145h-32.2zM1262.8 223h-32.2v-8a45.1 45.1 0 0 1-31.4 11 48.2 48.2 0 0 1-45.4-32 58.8 58.8 0 0 1-2.6-34 52.4 52.4 0 0 1 14.2-27 46.8 46.8 0 0 1 33.8-14c12.8-.1 23.2 3.6 31.4 11V78h32.2v145zm-46.6-26.8c3.9-1.6 7.2-4.6 10-9s4.4-9.2 4.4-14.7c0-7.6-2.4-13.8-7.3-18.8-5-5-10.7-7.4-17.4-7.4-5.1 0-9.7 1.4-13.7 4.2s-6.8 6.3-8.4 10.4c-1.5 4-2.3 8-2.3 11.6s.8 7.5 2.3 11.6a23.7 23.7 0 0 0 32.4 12zM1317.7 193.7c3.5 3.5 5.3 7.7 5.3 12.6 0 5-1.7 9.1-5.2 12.6a18 18 0 0 1-13 5c-5.5 0-9.9-1.6-13.4-5a17 17 0 0 1-5.2-12.6c0-4.9 1.8-9 5.3-12.6s8-5.3 13.2-5.3c5.1 0 9.4 1.7 13 5.3zm4.5-99.4l-2 82.6h-31.8l-2-82.6v-6.2h35.8v6.2z"></path></svg></div></a>
<div class="credits"><a class="other-pens" href="https://testing.gnet0.com/" target="_blank" rel="external noopener"><svg class="credits-logo codepen-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="0" height="0"><path d="M255.8 87.1c-.05-.32-.1-.63-.2-.94-.04-.18-.1-.35-.16-.53-.08-.27-.17-.54-.28-.8l-.25-.54c-.1-.3-.2-.5-.3-.8l-.3-.5-.4-.7-.4-.5-.5-.6-.4-.5-.6-.5-.5-.4c-.03-.1-.1-.1-.2-.2l-117-78c-3.7-2.5-8.5-2.5-12.2 0L5 79.7c-.06.04-.1.1-.17.13l-.5.36-.63.5-.48.4c-.2.2-.4.4-.55.6l-.37.5-.45.6-.32.5c-.14.26-.26.5-.37.75l-.25.52c-.1.23-.2.5-.2.8l-.2.6c-.1.3-.15.6-.2.9l-.1.47c-.1.5-.1.95-.1 1.44v78c0 .5 0 1 .1 1.46l.1.48c.07.3.1.62.2.93l.2.5c.08.3.17.6.27.8l.25.53.4.73.3.5c.1.23.3.44.5.65l.3.46c.2.2.3.4.5.6.2.15.3.3.5.4l.6.55.5.4.15.18 116.95 78c1.84 1.25 3.95 1.87 6.1 1.86 2.13 0 4.24-.63 6.1-1.86l117-78c.1-.05.1-.1.2-.15l.5-.37.6-.5c.15-.1.3-.27.44-.4.2-.2.4-.4.57-.6.16-.17.3-.3.4-.5.18-.2.34-.4.48-.65l.3-.5.36-.76c.1-.14.14-.3.22-.5l.3-.8.15-.53c.1-.3.12-.6.2-.9 0-.2.05-.34.1-.5.04-.5.1-.95.1-1.44V89c0-.5-.07-.96-.1-1.44 0-.17-.1-.3-.1-.47zM128 154l-38.9-26 38.9-26.02L166.9 128 128 154.02zm-11-71.15l-47.7 31.9L30.8 89 117 31.57v51.3zM49.52 128l-27.5 18.4v-36.8L49.5 128zm19.8 13.24l47.68 31.9v51.3L30.8 167l38.5-25.74zm69.68 31.9l47.7-31.9 38.5 25.74-86.2 57.46v-51.3zM206.47 128L234 109.6v36.8L206.46 128zm-19.78-13.23L139 82.87v-51.3L225.2 89l-38.5 25.77z"></path></svg>Visit my testing page</a> <a id="js-tweet-this" href="https://twitter.com/yeaitsgnet0" target="_blank" rel="external noopener"><svg class="credits-logo twitter-logo" id="js-twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.39 222.18" width="0" height="0"><path d="M273.4 26.3c-10.07 4.46-20.88 7.48-32.22 8.83 11.58-6.94 20.47-17.93 24.66-31.03C255 10.53 243 15.2 230.22 17.7 220 6.8 205.42 0 189.28 0c-30.98 0-56.1 25.1-56.1 56.1 0 4.38.5 8.66 1.46 12.77-46.6-2.34-87.94-24.67-115.6-58.6-4.84 8.28-7.6 17.92-7.6 28.2 0 19.45 9.9 36.62 24.95 46.68-9.2-.3-17.85-2.8-25.41-7.02-.02.24-.02.47-.02.7 0 27.2 19.33 49.86 45 55-4.7 1.3-9.67 1.98-14.78 1.98-3.62 0-7.13-.35-10.56-1 7.14 22.28 27.85 38.5 52.4 38.95-19.2 15.05-43.38 24-69.66 24-4.53 0-9-.25-13.38-.77 24.82 15.9 54.3 25.2 85.98 25.2 103.17 0 159.6-85.47 159.6-159.6 0-2.42-.07-4.84-.18-7.24 10.96-7.9 20.47-17.8 28-29.04z"></path></svg></a></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment