Obama to Trump Transition

HTML
<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>
SCSS
$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;} }
JAVASCRIPT
Expand for more options Login