A Pen by Andrew Moglione on CodePen.
Created
June 25, 2018 01:55
-
-
Save ix4/22e32bbae7da35419f04456d311e274b to your computer and use it in GitHub Desktop.
Obama to Trump
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
<div class="container"> | |
<svg class="logo" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="190" height="190.00014" id="svg2709"> | |
<defs id="defs2711"/> | |
<path d="M 190,95 A 95,95 0 1 1 0,95 A 95,95 0 1 1 190,95 z" id="path2694" style="fill:#ffffff"/> | |
<path d="M 411.66173,88.293526 A 49.978104,46.690071 0 1 1 311.70552,88.293526 A 49.978104,46.690071 0 1 1 411.66173,88.293526 z" transform="matrix(1.0869821,0,0,1.1477739,-298.14603,-7.18109)" id="path2696" style="fill:#ffffff"/> | |
<path class="ring" d="M 42.08342,104.40569 C 41.54309,101.35141 41.24281,98.2123 41.24281,95.00063 C 41.24281,65.30854 65.31151,41.2405 95.00225,41.2405 C 124.6907,41.2405 148.75832,65.30854 148.75832,95.00063 C 148.75832,98.12189 148.47699,101.17169 147.9668,104.14559 C 163.18614,106.60038 176.78564,110.08444 188.0151,114.35551 C 188.33216,112.82615 188.61013,111.28674 188.85572,109.73058 C 188.87916,109.57875 188.89591,109.42246 188.91936,109.26505 C 189.11583,107.97235 189.28554,106.66625 189.42842,105.35234 C 189.46861,104.95492 189.50879,104.55193 189.54898,104.15452 C 189.65727,103.03707 189.74099,101.90958 189.80798,100.78208 C 189.83477,100.36123 189.86603,99.94149 189.88389,99.52065 C 189.95422,98.02253 190,96.51548 190,94.99952 C 190.00111,42.53321 147.46779,-5.6843419e-14 95.00225,-5.6843419e-14 C 42.53444,-5.6843419e-14 0,42.53321 0,95.00063 C 0,96.56126 0.04912,98.11406 0.12504,99.66019 C 0.14289,100.06319 0.17416,100.46506 0.19648,100.86804 C 0.2724,102.0882 0.37063,103.30945 0.49233,104.52067 C 0.52357,104.85223 0.55484,105.18712 0.59502,105.52202 C 0.9478,108.70131 1.44904,111.83709 2.10657,114.91816 C 13.24338,110.53656 26.82947,106.94979 42.08342,104.40569 z" id="path2698" style="overflow:visible"/> | |
<path class="wave" d="M 172.03665,150.56138 C 127.08753,156.15642 89.05872,168.82006 65.31598,185.24235 C 74.65769,188.31448 84.63124,190.00014 95.00225,190.00014 C 126.71689,190.00014 154.77884,174.44188 172.03665,150.56138 z" id="path2700" style="fill-opacity:1;overflow:visible"/> | |
<path class="wave" d="M 178.0873,141.04023 C 180.47633,136.74235 182.53713,132.24468 184.24628,127.57506 C 173.83063,126.74788 163.0399,126.28237 151.96225,126.23323 C 95.64637,125.98319 46.30103,136.34942 19.06967,152.0595 C 24.73184,159.57238 31.4713,166.22681 39.07372,171.77161 C 67.50293,153.02066 119.64141,140.57471 178.0873,141.04023 z" id="path2702" style="fill-opacity:1;overflow:visible"/> | |
<path class="wave" d="M 131.7796,112.61628 C 152.14533,112.92886 170.15445,115.93959 186.58058,120.26759 C 187.12203,118.32182 187.60541,116.3504 188.01623,114.35551 C 165.05717,105.62136 132.25293,100.15248 95.80712,100.15248 C 58.57652,100.15248 25.13819,105.85803 2.10657,114.91926 C 3.59579,121.90412 5.8542,128.60878 8.79245,134.93168 C 35.95237,120.67951 83.77275,111.87839 131.7796,112.61628 z" id="path2707" style="fill-opacity:1;overflow:visible"/> | |
</svg> | |
</div> |
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
$obama-blue: #137ec0; | |
$obama-red: #d5302a; | |
$trump-hair: #f7d840; | |
$trump-face: #fc985a; | |
$aimnation-length: 5s; | |
.container{ | |
top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; | |
} | |
.logo{ | |
animation: rotate $aimnation-length ease infinite; | |
.ring{ | |
animation: ring-change $aimnation-length ease infinite; | |
} | |
.wave{ | |
animation: wave-change $aimnation-length ease infinite; | |
} | |
} | |
@keyframes rotate{ | |
0% {transform: rotate(0deg);} | |
25% {transform: rotate(0deg);} | |
50% {transform: rotate(160deg);} | |
75% {transform: rotate(160deg);} | |
100% {transform: rotate(360deg);} | |
} | |
@keyframes ring-change{ | |
0% {fill: $obama-blue;} | |
25% {fill: $obama-blue;} | |
50% {fill: $trump-face;} | |
75% {fill: $trump-face;} | |
100% {fill: $obama-blue;} | |
} | |
@keyframes wave-change{ | |
0% {fill: $obama-red;} | |
25% {fill: $obama-red;} | |
50% {fill: $trump-hair;} | |
75% {fill: $trump-hair;} | |
100% {fill: $obama-red;} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment