Skip to content

Instantly share code, notes, and snippets.

@hernandev

hernandev/index.html

Created February 15, 2018 06:41
Show Gist options
  • Save hernandev/9c4a002f268312c817228d8667a2eb70 to your computer and use it in GitHub Desktop.
Save hernandev/9c4a002f268312c817228d8667a2eb70 to your computer and use it in GitHub Desktop.
Download ZIP
BLOCKER.com.br // source http://jsbin.com/vaguyuh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>BLOCKER.com.br</title>
<style id="jsbin-css">
body {
background: black;
}
.blocker-page {
padding: 20px;
margin: 0 auto;
text-align: center;
}
.blocker-page svg {
width: 100%;
max-width: 400px;
}
#b-path-blocks {
animation-name: blockBlink;
animation-duration: 2s;
animation-delay: 500ms;
animation-iteration-count: 2;
animation-direction: normal;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
@keyframes blockBlink {
0% {
opacity: 1;
fill: url(#c-alt);
}
50% {
opacity: 1;
fill: url(#c);
}
100% {
opacity: 1;
fill: url(#c-alt);
}
}
</style>
</head>
<body>
<div class="blocker-page">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1309.457" height="692.541" viewBox="0 0 346.46 183.235">
<defs>
<linearGradient id="c">
<stop offset="0" stop-color="#e96034"/>
<stop offset=".232" stop-color="#cb3e93"/>
<stop offset=".471" stop-color="#8348ec"/>
<stop offset=".762" stop-color="#1196cf"/>
<stop offset="1" stop-color="#0c78cb"/>
</linearGradient>
<linearGradient id="c-alt">
<stop offset="0" stop-color="#0c78cb"/>
<stop offset=".232" stop-color="#1196cf"/>
<stop offset=".471" stop-color="#8348ec"/>
<stop offset=".762" stop-color="#cb3e93"/>
<stop offset="1" stop-color="#e96034"/>
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#201a41"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#20dfdc"/>
<stop offset="1" stop-color="#0c78cb"/>
</linearGradient>
<linearGradient xlink:href="#c" id="d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.15895 0 0 -.15705 187.084 241.29)" x1="-294.317" y1="1543.871" x2="-297.207" y2="565.262"/>
</defs>
<path id="b-path-blocks" d="M219.575.789c-7.055 4.694-13.105 8.78-13.446 9.08-.574.507-.612 1.548-.527 14.457l.092 13.911 13.525 9.05c7.44 4.977 13.767 9.049 14.062 9.049.295 0 6.623-4.072 14.062-9.05l13.525-9.049V10.123l-13.53-9.064c-8.998-6.029-13.765-9.021-14.233-8.935-.386.071-6.475 3.97-13.53 8.665zm26.796 4.616l10.455 7.009V22.63c0 5.747-.135 10.167-.31 10.1-.17-.064-4.98-3.2-10.69-6.97l-10.383-6.852-.025-10.28c-.014-5.653.091-10.268.236-10.256.145.012 4.968 3.177 10.719 7.032zM231.145 8.63l-.026 10.28-10.381 6.852c-5.71 3.769-10.521 6.905-10.692 6.97-.174.066-.31-4.354-.31-10.1V12.413l10.539-7.032c5.796-3.867 10.62-7.031 10.718-7.031.1 0 .168 4.625.153 10.279zm13.285 21.106c5.843 3.903 10.623 7.175 10.623 7.272.001.362-21.239 14.232-21.795 14.232-.555 0-21.748-13.87-21.748-14.232 0-.319 21.134-14.232 21.722-14.3.317-.038 5.356 3.125 11.198 7.028zm41.574 22.46c-8.61 5.68-9.147 6.103-9.147 7.217 0 1.078.91 2.194 1.79 2.194.344 0 3.248-1.74 6.453-3.865 3.205-2.127 5.904-3.866 5.997-3.866.093 0 .169 4.637.169 10.305v10.306l-10.644 7.09c-5.853 3.9-10.756 7.09-10.894 7.09-.138 0-.25-3.87-.25-8.602v-8.602l-.86-.563c-.74-.485-.997-.498-1.845-.091l-.985.472-.093 11.329-.093 11.329 13.531 9.002c10.114 6.73 13.732 8.964 14.326 8.847.96-.189 26.191-16.884 27.063-17.908.562-.66.615-1.864.615-13.999 0-12.125-.053-13.34-.615-14.022-1.069-1.296-26.204-17.904-27.138-17.931-.55-.02-3.254 1.546-7.38 4.268zm20.285 8.832l10.63 7.067v10.286c0 5.657-.118 10.276-.263 10.265-.145-.012-4.999-3.215-10.787-7.117l-10.523-7.095.034-10.127c.02-5.57.089-10.177.156-10.237.068-.06 4.906 3.07 10.753 6.958zm-2.106 24.267c5.847 3.918 10.724 7.216 10.835 7.328.112.111-4.729 3.486-10.757 7.499-8.097 5.389-11.094 7.21-11.467 6.97-6.054-3.903-21.173-14.101-21.188-14.293-.02-.261 20.76-14.252 21.534-14.498.225-.072 5.195 3.075 11.043 6.994zM159.742 56.38c-7.005 4.662-13.092 8.802-13.527 9.198l-.79.72v13.316c0 8.622.13 13.56.368 14.005.203.38 6.312 4.653 13.576 9.499 10.529 7.022 13.394 8.78 14.128 8.669.506-.077 6.89-4.126 14.186-8.997l13.267-8.856V82.71c0-11.2-.001-11.224-.781-11.77-1.07-.75-1.569-.69-2.565.307l-.855.854.02 8.107c.008 4.46-.069 8.147-.173 8.195-.105.049-4.937-3.075-10.739-6.94l-10.55-7.029-.007-10.308c-.002-5.67.113-10.256.258-10.192.145.065 2.824 1.818 5.953 3.895 3.13 2.078 5.964 3.778 6.298 3.778 1.64 0 2.523-2.49 1.279-3.605-1.77-1.586-15.081-10.1-15.791-10.1-.486 0-6.025 3.464-13.557 8.478zm11.337 7.805v10.311l-10.455 6.998c-5.75 3.848-10.574 7.05-10.719 7.114-.145.065-.259-4.521-.254-10.191l.01-10.308 10.708-7.117 10.709-7.117zm12.827 21.008c5.798 3.866 10.68 7.166 10.848 7.332.171.17-4.476 3.49-10.589 7.563l-10.893 7.262-10.945-7.295c-6.02-4.013-10.822-7.4-10.673-7.526.46-.39 21.524-14.406 21.62-14.386.049.012 4.833 3.183 10.632 7.05zm67.44-35.005c-1.015 1.548-.234 2.454 5.91 6.85 3.105 2.223 7.165 5.16 9.022 6.526 10.918 8.035 13.258 9.628 14.157 9.634 1.166.01 2.045-.827 2.045-1.944 0-.954-.483-1.362-8.82-7.446-2.977-2.172-8.654-6.319-12.617-9.214-7.721-5.642-8.62-6.05-9.697-4.406zm-51.626 8.628c-7.152 5.224-13.517 9.847-14.146 10.274-1.857 1.261-1.982 3.267-.251 4.056 1.294.59-1.59 2.521 23.71-15.888 3.58-2.607 6.284-4.823 6.471-5.307.46-1.189-.547-2.646-1.823-2.638-.694.002-4.541 2.622-13.961 9.503zm-8.17 46.805c-.243.194-.44.879-.44 1.523 0 1.08.275 1.37 3.543 3.735 1.95 1.41 4.303 3.117 5.23 3.793a1575.4 1575.4 0 0 0 5.304 3.838c1.99 1.434-.196-.173 2.797 2.017 2.994 2.19 6.011 3.543 6.4 3.543 1.038 0 1.99-1.024 1.99-2.143 0-1.037-4.867-3.953-6.112-4.888-2.319-1.682-7.047-5.12-10.506-7.64-6.398-4.66-6.846-4.866-8.207-3.778zm70.82 7.03c-5.637 4.108-4.982 3.726-7.119 5.277-3.164 2.295-3.907 3.003-4 3.809-.15 1.311.864 2.433 2.04 2.255.487-.074.236.236 8.016-5.436 13.456-9.81 14.145-10.366 14.145-11.42 0-.61-.19-1.298-.422-1.53-1.148-1.149-2.286-.515-12.66 7.046z" opacity=".95" fill="url(#d)" transform="translate(-65.739 7.878)"/>
<path id="b-path-name" d="M107.171 182.463c-6.095-1.381-10.96-4.586-14.043-9.254-4.646-7.032-5.407-18.372-1.795-26.753 1.903-4.416 6.682-9.086 11.031-10.781 14.507-5.652 30.346-.252 34.994 11.93 1.063 2.787 1.249 4.34 1.249 10.45 0 6.198-.179 7.646-1.307 10.62-1.839 4.848-7.324 10.526-11.882 12.303-6.134 2.39-12.105 2.876-18.247 1.485zm15.695-10.352c4.893-2.782 7.238-7.283 7.238-13.893 0-5.178-1-8.094-3.81-11.118-3.334-3.586-7.041-4.778-13.813-4.44-6.113.304-9.893 2.285-12.422 6.51-1.454 2.429-1.678 3.384-1.849 7.883-.24 6.303.728 9.338 4.093 12.842 3.141 3.271 6.239 4.266 12.64 4.06 4.28-.139 5.37-.392 7.923-1.844zm39.434 10.352c-10.325-2.34-16.34-9.192-17.856-20.343-1.936-14.238 5.971-26.109 19.174-28.782 7.322-1.483 16.479.29 21.268 4.12 2.065 1.65 5.902 6.098 6.283 7.283.082.253-.787 1.022-1.93 1.709a98.196 98.196 0 0 0-3.792 2.413l-1.714 1.166-1.443-2.27c-2.346-3.693-5.75-5.392-11.352-5.67-5.472-.27-8.146.346-11.714 2.703-3.971 2.623-5.582 5.98-5.87 12.236-.287 6.26.687 9.336 4.07 12.86 2.767 2.88 6.473 4.242 11.547 4.242 5 0 8.302-1.396 11.719-4.954l2.908-3.03 3.574 2.334c1.965 1.284 3.573 2.56 3.573 2.839 0 1.25-7.118 7.894-9.923 9.262-5.488 2.678-12.062 3.345-18.522 1.882zM0 167.867v-14.875l13.369-.195c12.297-.18 13.523-.29 15.295-1.375 2.469-1.51 3.306-3.783 2.17-5.893-1.652-3.069-2.841-3.279-17.465-3.084L0 142.622v-9.254h13.682c15.159 0 17.432.366 21.55 3.473 5.404 4.077 6.65 13.604 2.416 18.476-.839.965-.802 1.141.543 2.604 4.435 4.821 4.413 14.384-.043 19.276-1.928 2.116-5.698 4.088-9.37 4.899-1.689.373-8.377.645-15.85.645H0zm29.592 4.491c1.783-.899 2.49-1.65 2.837-3.014.933-3.675-.905-6.262-5.183-7.295-1.19-.287-6.566-.528-11.948-.536l-9.785-.013v12.056h10.852c9.874 0 11.065-.108 13.227-1.198zm21.126-14.303v-24.687h8.821v40.188h26.462v9.186H50.718zm148.848 0v-24.687h8.796l.15 10.28.15 10.28 13.231-10.258 13.231-10.26 7.416-.02 7.417-.023-14.207 10.984c-7.814 6.041-14.005 11.17-13.757 11.398.91.835 22.761 23.106 25.251 24.777l2.197 2.215h-12.735l-11.143-10.965-11.144-10.965-3.016 2.372-3.016 2.372v17.186h-8.821zm57.885 20.38v-4.305l12.542-.002c6.898-.002 15.333-.17 18.744-.375l6.202-.372v9.361H257.45v-4.306zm48.514-10.046v-14.353h13.056c11.962 0 13.25-.097 15.352-1.157 3.599-1.814 4.64-5.53 2.326-8.302-1.754-2.102-4.79-2.447-18.805-2.136l-11.93.265V133.3l15.023.177c14.319.169 15.152.239 17.772 1.497 5.562 2.67 7.699 6.206 7.701 12.746.002 4.468-.801 6.92-3.144 9.589l-1.109 1.264 1.4 1.733c1.927 2.384 2.602 6.275 2.602 15v7.435h-8.738l-.18-7.98c-.253-11.28-.566-11.532-14.374-11.537l-8.132-.002v19.52h-8.82zm-48.514-11.195v-4.306h34.18v8.612h-34.18zm0-19.52v-4.306h37.488v8.612H257.45z" fill="#d8e8ff"/>
</svg>
</div>
<script id="jsbin-source-css" type="text/css">body {
background: black;
}
.blocker-page {
padding: 20px;
margin: 0 auto;
text-align: center;
}
.blocker-page svg {
width: 100%;
max-width: 400px;
}
#b-path-blocks {
animation-name: blockBlink;
animation-duration: 2s;
animation-delay: 500ms;
animation-iteration-count: 2;
animation-direction: normal;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
@keyframes blockBlink {
0% {
opacity: 1;
fill: url(#c-alt);
}
50% {
opacity: 1;
fill: url(#c);
}
100% {
opacity: 1;
fill: url(#c-alt);
}
}</script>
</body>
</html>
Raw
jsbin.vaguyuh.css
body {
background: black;
}
.blocker-page {
padding: 20px;
margin: 0 auto;
text-align: center;
}
.blocker-page svg {
width: 100%;
max-width: 400px;
}
#b-path-blocks {
animation-name: blockBlink;
animation-duration: 2s;
animation-delay: 500ms;
animation-iteration-count: 2;
animation-direction: normal;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
@keyframes blockBlink {
0% {
opacity: 1;
fill: url(#c-alt);
}
50% {
opacity: 1;
fill: url(#c);
}
100% {
opacity: 1;
fill: url(#c-alt);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment