#Codevember 9 - SVG Disco iPhone

HTML
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" > <path fill="#933028" id="phone" d="M204.316,0H95.664C83.827,0,74.252,9.595,74.252,21.432v257.146c0,11.816,9.575,21.422,21.412,21.422 h108.652c11.836,0,21.432-9.605,21.432-21.422V21.432C225.748,9.595,216.152,0,204.316,0z M133.214,20.725h34.106 c2.667,0,4.809,2.141,4.809,4.797s-2.142,4.787-4.809,4.787h-34.106c-2.646,0-4.797-2.141-4.797-4.797 S130.568,20.725,133.214,20.725z M149.646,286.941c-7.454,0-13.493-6.061-13.493-13.493c0-7.454,6.04-13.493,13.493-13.493 c7.424,0,13.473,6.039,13.473,13.493C163.119,280.892,157.07,286.941,149.646,286.941z M214.517,246.957H85.453V53.054h129.063 V246.957h0.011H214.517z"/> </svg>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #000; } #phone { animation: changecolor 2s linear infinite; } @keyframes changecolor { 0% { fill: #2ecc71 } 10% { fill: #3498db } 20% { fill: #e67e22 } 30% { fill: #e74c3c } 40% { fill: #ecf0f1 } 50% { fill: #F05D5E } 60% { fill: #AEC5EB } 80% { fill: #9881F5 } 90% { fill: #FFF5C3 } 1000% { fill: #1fda9a } }
JAVASCRIPT
Expand for more options Login