Something pretty because I love pretty things.
A Pen by Chris Gannon on CodePen.
Created
March 24, 2020 18:45
-
-
Save MedRedha/3b60a49f7e9d26e0b3545fe5c24016de to your computer and use it in GitHub Desktop.
Droplet Loader
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
| <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> | |
| <defs> | |
| <filter id="drop" x="-100%" y="-100%" width="250%" height="250%"> | |
| <feGaussianBlur stdDeviation="5" result="coloredBlur" /> | |
| <feOffset dx="0" dy="60" result="offsetblur"></feOffset> | |
| <feFlood id="glowAlpha" flood-color="#555" flood-opacity="0.12"></feFlood> | |
| <feComposite in2="offsetblur" operator="in"></feComposite> | |
| <feMerge> | |
| <feMergeNode/> | |
| <feMergeNode in="SourceGraphic"></feMergeNode> | |
| </feMerge> | |
| </filter> | |
| <filter id="drop2" x="-100%" y="-100%" width="250%" height="250%"> | |
| <feGaussianBlur stdDeviation="6" result="coloredBlur" /> | |
| <feOffset dx="0" dy="6" result="offsetblur"></feOffset> | |
| <feFlood id="glowAlpha" flood-color="#555" flood-opacity="0.51"></feFlood> | |
| <feComposite in2="offsetblur" operator="in"></feComposite> | |
| <feMerge> | |
| <feMergeNode/> | |
| <feMergeNode in="SourceGraphic"></feMergeNode> | |
| </feMerge> | |
| </filter> | |
| <filter id="goo"> | |
| <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" /> | |
| <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" /> | |
| <feBlend /> | |
| </filter> | |
| <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="400" y1="100" x2="400" y2="600"> | |
| <stop offset="0" style="stop-color:#059FF6" /> | |
| <stop offset="1" style="stop-color:#0369F3" /> | |
| </linearGradient> | |
| <path id="copyright-cg" d=""/> | |
| <linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="400" y1="200" x2="400" y2="400"> | |
| <stop offset="0" style="stop-color:#059FF6" /> | |
| <stop offset="1" style="stop-color:#0408A7" /> | |
| </linearGradient> | |
| <linearGradient id="grad3" gradientUnits="userSpaceOnUse" x1="400" y1="500" x2="400" y2="600"> | |
| <stop offset="0" style="stop-color:#059FF6" /> | |
| <stop offset="1" style="stop-color:#0369F3" /> | |
| </linearGradient> | |
| <linearGradient id="grad4" gradientUnits="userSpaceOnUse" x1="400" y1="200" x2="400" y2="300"> | |
| <stop offset="0" style="stop-color:#02DBFE" /> | |
| <stop offset="1" style="stop-color:#0369F3" /> | |
| </linearGradient> | |
| <linearGradient id="grad5" gradientUnits="userSpaceOnUse" x1="400" y1="100" x2="400" y2="600"> | |
| <stop offset="0" style="stop-color:#0369F3" /> | |
| <stop offset="1" style="stop-color:#02DBFE" /> | |
| </linearGradient> | |
| <clipPath id="mainMask"> | |
| <circle cx="400" cy="300" r="100" /> | |
| </clipPath> | |
| <clipPath id="otherMask"> | |
| <rect x="300" y="0" width="200" height="400" rx="100" ry="100"/> | |
| </clipPath> | |
| </defs> | |
| <g filter="url(#drop)"> | |
| <g id="whole" clip-path="url(#mainMask)"> | |
| <g class="dots1" filter="url(#goo)" fill="url(#grad1)"> | |
| <circle class="outline" cx="400" cy="300" r="90" fill="none" stroke="#0369F3" stroke-width="23" stroke-dasharray="160 65" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| </g> | |
| <g class="dots2" filter="url(#goo)" fill="url(#grad2)"> | |
| <circle class="outline" cx="400" cy="300" r="90" fill="none" stroke="#0408A7" stroke-width="23" stroke-dasharray="160 40" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| </g> | |
| <g class="dots3" filter="url(#goo)" fill="url(#grad3)"> | |
| <circle class="outline" cx="400" cy="300" r="90" fill="none" stroke="url(#grad3)" stroke-width="23" stroke-dasharray="240 " /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| </g> | |
| <g class="dots4" filter="url(#goo)" fill="url(#grad4)"> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| <circle class="dot" cx="0" cy="0" r="20" /> | |
| </g> | |
| </g> | |
| </g> | |
| <g filter="url(#drop2)"> | |
| <g clip-path="url(#otherMask)" > | |
| <g class="dots5" fill="url(#grad2)" filter="url(#goo)"> | |
| <!-- <circle class="outline" cx="400" cy="300" r="89" fill="none" stroke="url(#grad2)" stroke-width="23" stroke-dasharray="90 145" stroke-dashoffset="0" stroke-linecap="round" /> --> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| <circle class="outsideDot" cx="0" cy="0" r="20" /> | |
| </g> | |
| </g> | |
| </g> | |
| <!-- <rect x="300" y="0" width="200" height="400" rx="100" ry="100" opacity="0.3" fill="url(#grad3)"/> --> | |
| </svg> |
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
| let select = s => document.querySelector(s), | |
| selectAll = s => document.querySelectorAll(s), | |
| mainSVG = select('#mainSVG') | |
| let e = CustomWiggle.create('', {wiggles: 1, type: 'easeOut'}); | |
| gsap.set('svg', { | |
| visibility: 'visible' | |
| }) | |
| gsap.set('.dot', { | |
| transformOrigin: '50% 50%', | |
| attr:{ | |
| cx:'random(350, 450)', | |
| cy: 440, | |
| r: 'random(4, 20)' | |
| } | |
| }) | |
| gsap.set('.outsideDot', { | |
| transformOrigin: '50% 50%', | |
| attr:{ | |
| cx:'random(370, 420)', | |
| cy: 420, | |
| r: 'random(3, 19)' | |
| } | |
| }) | |
| let tl1 = gsap.timeline(); | |
| tl1.to('.dots1 .dot', { | |
| duration: 'random(2,8)', | |
| attr:{ | |
| cy: 'random(-220, -320)' | |
| }, | |
| stagger: { | |
| each: 0.16, | |
| repeat: -1, | |
| repeatRefresh: false | |
| }, | |
| ease: 'sine.in' | |
| }).seek(100) | |
| let tl2 = gsap.timeline(); | |
| tl2.to('.dots2 .dot', { | |
| duration: 'random(2,5)', | |
| attr:{ | |
| cy: 'random(-220, -320)' | |
| }, | |
| stagger: { | |
| each: 0.16, | |
| repeat: -1, | |
| repeatRefresh: false | |
| }, | |
| ease: 'sine.in' | |
| }).seek(100) | |
| let tl3 = gsap.timeline(); | |
| tl3.to('.dots3 .dot', { | |
| duration: 'random(6,12)', | |
| attr:{ | |
| cy: 'random(-220, -320)' | |
| }, | |
| stagger: { | |
| each: 0.16, | |
| repeat: -1, | |
| repeatRefresh: false | |
| }, | |
| ease: 'sine.in' | |
| }).seek(100) | |
| let tl4 = gsap.timeline(); | |
| tl4.to('.dots4 .dot', { | |
| duration: 'random(3,9)', | |
| attr:{ | |
| cy: 'random(-220, -320)' | |
| }, | |
| stagger: { | |
| each: 0.16, | |
| repeat: -1, | |
| repeatRefresh: false | |
| }, | |
| ease: 'sine.in' | |
| }).seek(100) | |
| gsap.to({}, {ease: e}); | |
| let tl5 = gsap.timeline(); | |
| tl5.to('.dots5 .outsideDot', { | |
| duration: 'random(3,9)', | |
| attr:{ | |
| cy: 'random(-220, -320)', | |
| r: 0 | |
| }, | |
| stagger: { | |
| each: 0.16, | |
| repeat: -1, | |
| repeatRefresh: false | |
| }, | |
| ease: 'power2.in' | |
| }).seek(100) | |
| gsap.to('.outline', { | |
| duration: gsap.utils.wrap([7, 6.1, 5.2]), | |
| svgOrigin: '400 300', | |
| rotation: gsap.utils.wrap([-360, -360]), | |
| ease: 'linear', | |
| stagger: { | |
| each: 1, | |
| repeat: -1 | |
| } | |
| }).seek(200) | |
| //ScrubGSAPTimeline(tl) | |
| //gsap.globalTimeline.timeScale(0.25) |
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
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script> | |
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script> | |
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js"></script> |
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-color: #FFFCF9; | |
| overflow: hidden; | |
| text-align:center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| body, | |
| html { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| visibility: hidden; | |
| } | |
| /* .dot { | |
| fill: url(#grad); | |
| } */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment