A Pen by Brian McDaniel on CodePen.
Last active
March 8, 2019 18:35
-
-
Save bkmacdaddy/54aa88bd554ab298182e239adc02f9ad to your computer and use it in GitHub Desktop.
Animated Waves
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
| <div class="container"> | |
| <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 750"><defs><style>.cls-1{fill:none;}</style></defs><title>Wave-white-02</title><path id="white" class="cls-1" d="M1996.52,57.32V748.53q-1919,2.4-2000,0t0-140.7c98.43-27.5,206.83-42.45,314.41-53,112.22-11,247.64-23,324.35-32,25.69-3,45-9.31,47.9-17.14,4.25-11.41-16.66-17.23-13.33-24.12,6.22-12.87,36.13-14.77,54.45-15.14,26.1-.53,49.68-4.14,55.55-14.94,7.25-13.34-23.6-26-41-30.44-19.42-5-38.5-11.69-53-19.92l-.07,0c-17.68-10-28.55-22.36-25-36.67,6.6-26.39,44.93-51.77,224.08-85.82q35.43-6.73,70.35-12.38c148.57-24.17,293.47-36,466.34-57.92,31.66-4,80.41-21.18,67.28-43.49a24.52,24.52,0,0,0-2.38-3.31c-9-10.62-32-21.08-46.22-29.7-32-19.39,1.32-48.54,51.45-64.43,32-10.16,67.9-18.93,105.38-26.49C1778.18,4.27,1996.52-4,1996.52-4ZM726.41,331.39c-1.47.28-2.91.57-4.29.92-6.85,1.74-12.35,5.09-14.89,9.05-4.82,7.51,4.74,13.26,3.88,20.58-1.78,15.53-37,12.15-31.65,26.07,1.57,4.11,1.71,8.68,6.23,12-17.71-10-28.58-22.27-25-36.52,6.6-26.28,45-51.56,224.32-85.48-17,3.25-33.72,7.29-50,11.52-15.88,4.12-31.48,8.6-46.62,13.52-12.49,4.06-36,9.54-41.27,17.55-1.49,2.28-2.55,4.73-5.38,6.57-3.78,2.45-9.68,3.19-15.27,4.23M1597,41c-39.3,10.73-58.17,16.57-74.21,31.12-5.14,4.64-9.43,8.77-21.61,10.35-11.71,1.5-26.91,0-34,5.49-8.94,6.85,5.7,18-5,23.77-3.27,1.76-8.27,2.49-10.55,4.69-2.12,2.06-1.09,4.66.3,6.91,4.72,7.62,13.94,12.44,21.3,19,7.74,6.86,11.34,15.12,15.85,22.72a24.4,24.4,0,0,0-2.37-3.31c-9-10.63-31.91-21.09-46.1-29.72-31.94-19.4,1.31-48.56,51.32-64.47C1523.84,57.34,1559.61,48.56,1597,41"/></svg> | |
| <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 751"><defs><style>.cls-1{fill:none;}</style></defs><title>Lighter-1</title><path id="lighter-blue" class="cls-1" d="M1486.29,160.18c-3.44-6.16-7-12.47-13.1-17.9-7.36-6.51-16.58-11.33-21.3-19-1.39-2.25-2.42-4.85-.3-6.91,2.28-2.2,7.28-2.93,10.55-4.69,10.69-5.73-4-16.92,5-23.77,7.14-5.46,22.34-4,34-5.49,12.18-1.58,16.47-5.71,21.61-10.35,16-14.51,34.8-20.35,73.87-31l1.37-.28C1779.18,4.27,1997.52-4,1997.52-4V750q-1919,.93-2000-1.47t0-140.7q20.16-5.64,40.87-10.59c125.12-17.2,114.27,11.11,172.94-5.74,17.39-5,17.23-9,36.66-9.9,18.42-.84,35.18,13.88,53.66,13.7,35.13-.36,47.57-16.93,78-30.1,31.14-13.47,59.31-8.07,100.83-8.61,35.84-.48,144.91-32.55,155.8-33.84,25.69-3,45-9.31,47.9-17.14,4.25-11.41-16.66-17.23-13.33-24.12,6.22-12.87,36.13-14.77,54.45-15.14,26.1-.53,49.68-4.14,55.55-14.94,7.25-13.34-23.6-26-41-30.44-19.42-5-38.5-11.69-53-19.92l-.07,0c-1-.57-2-1.14-2.92-1.72-3.67-3.24-3.89-7.47-5.35-11.29-5.37-13.92,29.87-10.54,31.65-26.07.86-7.32-8.7-13.07-3.88-20.58,2.54-4,8-7.31,14.89-9.05,1.38-.35,2.82-.64,4.29-.92,5.59-1,11.49-1.78,15.27-4.23,2.83-1.84,3.89-4.29,5.38-6.57,5.23-8,28.78-13.49,41.27-17.55,15.14-4.92,30.74-9.4,46.62-13.52q6.27-1.62,12.62-3.2,18.4-3.82,39.26-7.79,35.43-6.73,70.35-12.38c148.57-24.17,293.47-36,466.34-57.92,31.66-4,80.41-21.18,67.28-43.49a24.52,24.52,0,0,0-2.38-3.31C1487.06,161,1486.69,160.6,1486.29,160.18Z"/></svg> | |
| <svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 899"><defs><style>.cls-1{fill:none;}</style></defs><title>wave1</title><path id="wave" class="cls-1" d="M1939,898.5H-51q-77.18-284.93,20.84-284.92c98,0,397.16-14.31,485.55-30.58,92.42-17,324.5-66.66,430.73-96,29-8,59.18-27.06,62.62-45.18,6.71-35.18-54.68-59.18-51.37-94.87,2.73-29.56,40-50,100.81-67.17,66.3-18.76,149-29.48,222.66-34.37s147-10.54,220.28-17c139.58-12.39,194-23.46,237.05-46.21,39.16-20.66,38.85-50.54,36-72.71-1.89-14.55-14-28.12-14.81-42.71-1.27-24.15,27-35.43,58.72-43.88C1831.81,3.2,1920.16.18,1998-3Z"/></svg> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/322321/lady-wading.svg" id="woman-wading" /> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/322321/woman-swim.svg" id="woman-swim" /> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/322321/man-swim.svg" id="man-swim" /> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/322321/seagull.svg" id="bird-swim-one" /> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/322321/seagull.svg" id="bird-swim-two" /> |
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
| body { | |
| background:#FFE1B5; | |
| height:100%; | |
| margin:0; | |
| padding-top:200px; | |
| .container { | |
| height:100vh; | |
| position:relative; | |
| width:100%; | |
| } | |
| } | |
| svg { | |
| bottom:0; | |
| left:auto; | |
| position:absolute; | |
| right:0; | |
| top:auto; | |
| &#Layer_1 { | |
| animation: swell 7s ease 2s infinite; | |
| bottom:200px; | |
| z-index:1; | |
| path { | |
| fill:#fff; | |
| } | |
| } | |
| &#Layer_2 { | |
| animation: swell 7s ease 1s infinite; | |
| bottom:200px; | |
| z-index:2; | |
| path { | |
| fill:#59959f; | |
| } | |
| } | |
| &#Layer_3 { | |
| animation: swell 7s ease 0s infinite; | |
| z-index:3; | |
| path { | |
| fill:#24444c; | |
| } | |
| } | |
| } | |
| #woman-wading { | |
| animation: wading 7s ease 0s infinite; | |
| bottom: 270px; | |
| position: absolute; | |
| left: 100px; | |
| z-index: 4; | |
| } | |
| #woman-swim { | |
| animation: float-one 7s ease 0.5s infinite; | |
| bottom: 170px; | |
| position: absolute; | |
| right: 100px; | |
| z-index: 4; | |
| } | |
| #man-swim { | |
| animation: float-one 7s ease 0s infinite; | |
| bottom: 300px; | |
| position: absolute; | |
| right: 500px; | |
| z-index: 4; | |
| } | |
| #bird-swim-one { | |
| animation: float-two 7s ease-in-out 0.3s infinite; | |
| bottom: 420px; | |
| position: absolute; | |
| right: 180px; | |
| z-index: 4; | |
| } | |
| #bird-swim-two { | |
| animation: float-three 7s ease-in-out -0.3s infinite; | |
| bottom: 400px; | |
| position: absolute; | |
| right: 260px; | |
| z-index: 4; | |
| } | |
| @keyframes swell { | |
| 0%, 100% { | |
| transform: scale(1); | |
| transform-origin:bottom right; | |
| } | |
| 50% { | |
| transform: scale(1.15, 1.05); | |
| transform-origin:bottom right; | |
| } | |
| } | |
| @keyframes float-one { | |
| 0% { | |
| transform: translate(0, 0) rotate(5deg); | |
| transform-origin:bottom right, center; | |
| } | |
| 50% { | |
| transform: translate(-50px, -30px); | |
| transform-origin:bottom right; | |
| } | |
| 100% { | |
| transform: translate(0, 0) rotate(5deg); | |
| transform-origin:bottom right, center; | |
| } | |
| } | |
| @keyframes float-two { | |
| 0%, 100% { | |
| transform: translate(0, 0) rotate(7deg); | |
| transform-origin:bottom right, center; | |
| } | |
| 50% { | |
| transform: translate(-40px, -40px); | |
| transform-origin:bottom right; | |
| } | |
| } | |
| @keyframes float-three { | |
| 0%, 100% { | |
| transform: translate(0, 0) rotate(-7deg); | |
| transform-origin:bottom right, center; | |
| } | |
| 50% { | |
| transform: translate(-40px, -40px); | |
| transform-origin:bottom right; | |
| } | |
| } | |
| @keyframes wading { | |
| 0%, 100% { | |
| transform: translate(0, 0); | |
| transform-origin:bottom right; | |
| } | |
| 50% { | |
| transform: translate(-10px, -10px); | |
| transform-origin:bottom right; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment