Last active
December 8, 2020 02:11
-
-
Save osvein/40f53d172a9fe0a3d299c90c792c0b9b to your computer and use it in GitHub Desktop.
.55, .03, .81, .09
This file contains hidden or 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
| <?xml version="1.0" encoding="UTF-8" ?> | |
| <?xml-stylesheet type="text/css" href="surreal.css" ?> | |
| <?xml-stylesheet type="text/css" href="despic.css" ?> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2 1" width="1024" height="512"> | |
| <defs> | |
| <filter id="gridglow"> | |
| <feGaussianBlur stdDeviation="0.005" result="gridblur" /> | |
| <feMerge> | |
| <feMergeNode in="gridblur" /> | |
| <feMergeNode in="SourceGraphic" /> | |
| </feMerge> | |
| </filter> | |
| <filter id="sunglow" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse"> | |
| <feGaussianBlur stdDeviation="0.1" result="sunblur" /> | |
| <feMerge> | |
| <feMergeNode in="sunblur" /> | |
| <feMergeNode in="SourceGraphic" /> | |
| </feMerge> | |
| </filter> | |
| <linearGradient id="sungrad" x1="0%" x2="0%" y1="0%" y2="100%"> | |
| <stop offset="0%" stop-color="yellow" /> | |
| <stop offset="65%" stop-color="red" /> | |
| <stop offset="100%" stop-color="#43005b" /> | |
| </linearGradient> | |
| <radialGradient id="orang_eye"> | |
| <stop offset="0%" stop-color="black" /> | |
| <stop offset="29%" stop-color="black" /> | |
| <stop offset="30%" stop-color="cornflowerblue" /> | |
| <stop offset="49%" stop-color="cornflowerblue" /> | |
| <stop offset="50%" stop-color="white" /> | |
| <stop offset="74%" stop-color="lightgrey" /> | |
| <stop offset="75%" stop-color="saddlebrown" /> | |
| <stop offset="100%" stop-color="orangered" /> | |
| </radialGradient> | |
| <mask id="sunmask" x="0" y="0" width="100%" height="100%"> | |
| <rect width="100%" height="100%" fill="white" stroke="none" /> | |
| <line x2="100%" y1="75%" y2="75%" stroke-width="3%" stroke="black" /> | |
| <line x2="100%" y1="70%" y2="70%" stroke-width="3%" stroke="black" /> | |
| <line x2="100%" y1="65%" y2="65%" stroke-width="2.5%" stroke="black" /> | |
| <line x2="100%" y1="60%" y2="60%" stroke-width="2%" stroke="black" /> | |
| <line x2="100%" y1="55%" y2="55%" stroke-width="1.5%" stroke="black" /> | |
| <line x2="100%" y1="50%" y2="50%" stroke-width="1%" stroke="black" /> | |
| <line x2="100%" y1="45%" y2="45%" stroke-width="0.5%" stroke="black" /> | |
| </mask> | |
| <g id="orang_parts"> | |
| <path class="orang_stroke" d="M 0.24,0.5 a 0.125,0.125 0 0,0 -0.125,0.125"> | |
| <animateTransform attributeName="transform" type="rotate" from="0 0.24 0.625" by="90 0 0" dur="2s" fill="freeze" begin="orang_fadein.end" /> | |
| </path> | |
| <rect x="0.1" y="0.625" width="0.1"> | |
| <animate id="orang_legs" attributeName="height" to="0.3" dur="2s" fill="freeze" begin="orang_fadein.end" /> | |
| </rect> | |
| <rect x="0.1" y="0.875" height="0.05"> | |
| <animate attributeName="width" to="0.5" dur="5s" fill="freeze" begin="orang_legs.end" /> | |
| </rect> | |
| <circle class="orang_eye" cx="0.08" cy="0.42"> | |
| <animate attributeName="r" to="0.05" dur="2s" fill="freeze" begin="orang_fadein.end" /> | |
| </circle> | |
| </g> | |
| <g id="halfgrid"> | |
| <line y1="0.6" x2="0.1" y2="1" /> | |
| <line y1="0.6" x2="0.3" y2="1" /> | |
| <line y1="0.6" x2="0.5" y2="1" /> | |
| <line y1="0.6" x2="0.7" y2="1" /> | |
| <line y1="0.6" x2="0.9" y2="1" /> | |
| <line y1="0.6" x2="1.1" y2="1" /> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="0.5s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="0.5s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="1s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="1s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="1.5s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="1.5s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="2s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="2s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="2.5s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="2.5s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="3s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="3s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="3.5s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="3.5s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="4s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="4s" /> | |
| </line> | |
| <line y1="0.6" y2="0.6"> | |
| <animateMotion by="0 0.4" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="4.5s" /> | |
| <animate attributeName="x2" to="1.1" dur="5s" calcMode="spline" keySplines="0.55 0.03 0.85 0.1" repeatCount="indefinite" begin="4.5s" /> | |
| </line> | |
| </g> | |
| </defs> | |
| <rect class="bg" width="100%" height="100%" /> | |
| <g id="sung"> | |
| <!--<animate attributeName="opacity" to="0" dur="10s" begin="orang_fadein.begin" fill="freeze" />--> | |
| <circle class="sun" r="0.25" cx="50%" cy="50%" /> | |
| </g> | |
| <g id="orang" class="orang"> | |
| <animate id="orang_fadein" attributeName="opacity" to="1" dur="10s" fill="freeze" begin="5s" /> | |
| <circle r="0.25" cx="50%" cy="50%" /> | |
| <use href="#orang_parts" transform="translate(1 0)" /> | |
| <use href="#orang_parts" transform="translate(1 0) scale(-1 1)" /> | |
| <circle class="orang_mouth" cx="50%" cy="60%"> | |
| <animate attributeName="r" to="0.05" dur="2s" fill="freeze" begin="orang_fadein.end" /> | |
| </circle> | |
| </g> | |
| <g class="grid"> | |
| <use href="#halfgrid" transform="translate(1 0)" /> | |
| <use href="#halfgrid" transform="translate(1 0) scale(-1 1)" /> | |
| </g> | |
| </svg> |
This file contains hidden or 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
| .bg { | |
| stroke: none; | |
| fill: #21002D; | |
| } | |
| #sung { | |
| filter: url(#sunglow); | |
| } | |
| .sun { | |
| stroke: none; | |
| fill: url(#sungrad); | |
| mask: url(#sunmask); | |
| } | |
| .grid { | |
| stroke-width: 0.005; | |
| stroke: #AE3CD7; | |
| fill: none; | |
| filter: url(#gridglow); | |
| } | |
| .orang { | |
| stroke: none; | |
| fill: orangered; | |
| opacity: 0; | |
| } | |
| .orang_stroke { | |
| stroke: orangered; | |
| stroke-width: 0.05; | |
| fill: none; | |
| } | |
| .orang_eye { | |
| fill: url(#orang_eye); | |
| } | |
| .orang_mouth { | |
| fill: #7F2300; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment