A Pen by Andrej Sharapov on CodePen.
Created
October 29, 2019 15:44
-
-
Save deli4iled/872652a551d1b3054f713dd97bb2cbb2 to your computer and use it in GitHub Desktop.
Some SVG animation & keyframes
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
| h1 | |
| each txt in ["Get ready","see something more...","than just design!","This is art...","I have not yet invented ☹"] | |
| span=txt | |
| svg.bg(viewBox="0 0 512.009 512.009") | |
| defs | |
| linearGradient( | |
| id="gradient" | |
| x1="0" | |
| y1="0" | |
| x2="1" | |
| y2="1" | |
| ) | |
| stop( | |
| offset="0%" | |
| stop-color="#ff8a00" | |
| ) | |
| stop( | |
| offset="100%" | |
| stop-color="#c8305f" | |
| ) | |
| path(d="M504.473,401.071c4.713,0,8.533-3.821,8.533-8.533c0-4.713-3.821-8.533-8.533-8.533h-8.533 c0-4.713-3.82-8.533-8.533-8.533s-8.533,3.82-8.533,8.533H342.34c0-4.713-3.821-8.533-8.533-8.533 c-4.713,0-8.533,3.82-8.533,8.533h-8.533c-4.713,0-8.533,3.821-8.533,8.533c0,4.713,3.82,8.533,8.533,8.533h8.533v25.6h-8.533 c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533h8.533v8.533h-8.533c-4.713,0-8.533,3.821-8.533,8.533 s3.82,8.533,8.533,8.533h8.533v25.6H180.206v-70.6c12.623,7.113,26.865,10.856,41.354,10.867 c48.46-0.698,87.215-40.48,86.646-88.942c0.263-33.693-18.552-64.638-48.588-79.908c9.888-13.462,15.186-29.747,15.113-46.45 c0.297-36.863-25.562-68.771-61.688-76.117c9.141-20.158,7.57-43.556-4.185-62.31c-11.754-18.755-32.126-30.37-54.253-30.931 c-0.253,0-0.497,0.036-0.749,0.039c-4.543-29.367-29.99-50.923-59.704-50.577c-29.714,0.346-54.651,22.49-58.509,51.955 C14.035,56.104-0.882,75.998,1.197,97.902c2.079,21.904,20.473,38.635,42.476,38.636h49.741c0.77,2.454,1.683,4.861,2.734,7.208 c-36.124,7.371-61.97,39.291-61.667,76.158c-0.073,16.703,5.225,32.988,15.112,46.45c-30.035,15.271-48.85,46.215-48.587,79.908 c-0.57,48.461,38.186,88.244,86.646,88.942c14.489-0.011,28.731-3.753,41.354-10.867v70.6H9.54c-4.713,0-8.533,3.82-8.533,8.533 s3.82,8.533,8.533,8.533h494.933c4.713,0,8.533-3.82,8.533-8.533s-3.821-8.533-8.533-8.533h-8.533v-25.6h8.533 c4.713,0,8.533-3.82,8.533-8.533s-3.821-8.533-8.533-8.533h-8.533v-8.533h8.533c4.713,0,8.533-3.82,8.533-8.533 s-3.821-8.533-8.533-8.533h-8.533v-25.6H504.473z M90.277,116.521c0,0.991,0.112,1.965,0.156,2.95h-46.76 c-14.138,0-25.6-11.461-25.6-25.6c0-14.139,11.462-25.6,25.6-25.6c2.263,0.001,4.434-0.898,6.035-2.499 c1.6-1.6,2.499-3.771,2.499-6.035c-0.044-22.27,17.079-40.812,39.282-42.538c22.203-1.727,41.986,13.946,45.386,35.955 C109.043,61.655,90.096,87.421,90.277,116.521z M163.14,494.938h-17.067v-83.145c3.058-2.848,5.91-5.91,8.533-9.163 c2.623,3.253,5.475,6.315,8.533,9.162V494.938z M164.176,386.502l56.197-56.198c3.281-3.341,3.256-8.701-0.054-12.012 s-8.671-3.335-12.012-0.054l-45.167,45.166v-86.8l40.166-40.166c3.296-3.338,3.28-8.711-0.038-12.029 c-3.317-3.317-8.69-3.334-12.029-0.038l-28.1,28.1v-39.133c0-4.713-3.821-8.533-8.533-8.533c-4.713,0-8.533,3.821-8.533,8.533 v39.133l-28.1-28.1c-3.338-3.296-8.711-3.279-12.029,0.038s-3.334,8.69-0.038,12.029l40.166,40.167v86.8l-45.167-45.167 c-3.338-3.296-8.711-3.279-12.029,0.038c-3.317,3.317-3.334,8.691-0.038,12.029l56.197,56.197 c-12.493,19.629-34.118,31.55-57.385,31.636c-39.038-0.687-70.159-32.835-69.579-71.875 c-0.362-30.873,19.152-58.485,48.375-68.45c2.825-0.931,4.961-3.266,5.637-6.163c0.676-2.897-0.207-5.936-2.328-8.021 c-11.73-11.515-18.298-27.288-18.208-43.725c-0.558-32.561,25.193-59.507,57.746-60.425c3.523,0.311,6.89-1.513,8.554-4.634 c1.455-2.868,1.17-6.311-0.737-8.9c-6.325-8.508-9.749-18.823-9.767-29.425c-0.416-26.542,20.722-48.416,47.262-48.908 c26.541,0.492,47.679,22.366,47.262,48.908c-0.018,10.602-3.442,20.917-9.767,29.425c-1.868,2.611-2.102,6.052-0.604,8.892 c1.508,2.881,4.494,4.683,7.746,4.675c32.789,0.59,58.918,27.601,58.421,60.392c0.09,16.437-6.479,32.21-18.208,43.725 c-2.122,2.085-3.004,5.124-2.328,8.021s2.812,5.232,5.637,6.163c32.774,11.46,52.753,44.622,47.565,78.952 s-34.072,60.109-68.769,61.373C198.293,418.052,176.669,406.131,164.176,386.502z M478.873,494.938H342.34v-25.6h136.533V494.938 z M478.873,452.271H342.34v-8.533h136.533V452.271z M478.873,426.671H342.34v-25.6h136.533V426.671z") | |
| path(d="M367.94,213.338h102.4c22.002-0.001,40.396-16.732,42.476-38.636c2.079-21.904-12.838-41.798-34.447-45.939 c-3.905-29.73-29.244-51.958-59.229-51.958s-55.324,22.228-59.229,51.958c-21.609,4.141-36.526,24.035-34.447,45.939 S345.937,213.337,367.94,213.338z M367.94,145.071c2.263,0.001,4.434-0.898,6.035-2.499c1.6-1.6,2.499-3.771,2.499-6.035 c0-23.564,19.103-42.667,42.667-42.667s42.667,19.102,42.667,42.667c-0.001,2.263,0.898,4.434,2.499,6.035 c1.6,1.6,3.771,2.499,6.035,2.499c14.138,0,25.6,11.462,25.6,25.6s-11.461,25.6-25.6,25.6h-102.4 c-14.138,0-25.6-11.461-25.6-25.6S353.801,145.071,367.94,145.071z") |
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
| // It's me https://twitter.com/andrejsharapov | |
| // instagram image https://www.instagram.com/p/Bu3kXP7hUYN |
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
| @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900'); | |
| $bg: #9a0fe0; | |
| $colone: #ff8a00; | |
| $coltwo: #c8305f; | |
| $gradient: linear-gradient( | |
| 90deg, | |
| $colone, | |
| $coltwo | |
| ); | |
| @mixin bgcolor { | |
| color: transparent; | |
| background-image: $gradient; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| } | |
| *, | |
| ::before, | |
| ::after { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| position: relative; | |
| margin: 0; | |
| overflow: hidden; | |
| display: flex; | |
| height: 100vh; | |
| justify-content: space-between; | |
| letter-spacing: 2px; | |
| align-items: center; | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: darken($bg, 35%); | |
| } | |
| h1 { | |
| position: relative; | |
| white-space: nowrap; | |
| text-transform: uppercase; | |
| max-width: 50vw; | |
| text-align: center; | |
| font-size: 2.5vw; | |
| font-weight: 900; | |
| pointer-events: none; | |
| user-select: none; | |
| span { | |
| position: absolute; | |
| left: 5vw; | |
| @include bgcolor; | |
| opacity: 0; | |
| animation: scale 4s cubic-bezier(.5,-.75,.7,1.25) forwards; | |
| &:nth-child(2) { | |
| animation-delay: 3s; | |
| } | |
| &:nth-child(3) { | |
| animation-delay: 6s; | |
| } | |
| &:nth-child(4) { | |
| animation-delay: 9s; | |
| } | |
| &:nth-child(5) { | |
| animation-delay: 12s; | |
| } | |
| &:last-child { | |
| text-shadow: 20px -25px rgba(0, 0, 0, 0.2); | |
| animation: fade 2s linear 15s forwards; | |
| } | |
| } | |
| } | |
| .bg { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| max-width: 47vw; | |
| height: 100vh; | |
| opacity: 0.6; | |
| fill: none; | |
| stroke: url(#gradient); | |
| stroke-width: 2; | |
| stroke-dasharray: 3000; | |
| stroke-dashoffset: 3000; | |
| animation: dash 10s cubic-bezier(.51,.92,.24,1.15) 10s forwards; | |
| } | |
| @keyframes scale { | |
| 0% { | |
| opacity: 0.2; | |
| transform: scale(10); | |
| filter: blur(10px); | |
| } | |
| 50%, | |
| 85% { | |
| opacity: 0.8; | |
| transform: scale(1); | |
| filter: blur(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: rotateX(90deg); | |
| filter: blur(10px); | |
| } | |
| } | |
| @keyframes fade { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 0.8; | |
| } | |
| } | |
| @keyframes dash { | |
| 90% { | |
| stroke-dasharray: 0; | |
| stroke-dashoffset: 0; | |
| } | |
| 100% { | |
| stroke-dasharray: 3000; | |
| stroke-dashoffset: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment