New logo design for life2film.com with svg animation pattern
Created
July 26, 2019 20:30
-
-
Save fortunto2/bd55b168f63a166c7ecfe7fee8a4fc8a to your computer and use it in GitHub Desktop.
life2film.com new logo pattern
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
<div> | |
<svg width="100%" viewBox="-2000 -2000 4000 4000" | |
preserveAspectRatio="xMidYMin meet" | |
style='stroke-width: 0px; background-color: black;' | |
> | |
<g class="g-circles" fill="none" | |
stroke-width="40" | |
stroke="url(#paint1)" | |
stroke-linecap="round" | |
stroke-linejoin="round" | |
stroke-location="center" | |
> | |
<circle r="200" stroke="url(#paint2)"/> | |
<circle r="292" stroke-dasharray="350 80" stroke="url(#paint2)"/> | |
<circle r="380" stroke-dasharray="400 80" stroke="url(#paint2)"/> | |
<circle r="464" stroke-dasharray="400 100" stroke-dashoffset="0"/> | |
<circle r="554" stroke-dasharray="400 120" stroke-dashoffset="100"/> | |
<circle r="652" stroke-dasharray="600 140" stroke-dashoffset="200"/> | |
<circle r="753" stroke-dasharray="700 160" stroke-dashoffset="0"/> | |
<circle r="862" stroke-dasharray="800 180" stroke-dashoffset="400"/> | |
<circle r="981" stroke-dasharray="1000 200" stroke-dashoffset="500"/> | |
<circle r="1108" stroke-dasharray="1500 220" stroke-dashoffset="600"/> | |
<circle r="1230" stroke-dasharray="1500 240" stroke-dashoffset="700"/> | |
<circle r="1370" stroke-dasharray="2000 260" stroke="url(#paint3)"/> | |
<circle r="1510" stroke-dasharray="3000 280" stroke-dashoffset="300"/> | |
<circle r="1650" stroke-dasharray="1500 300" stroke="url(#paint3)"/> | |
</g> | |
<!-- icons --> | |
<path class="play" d="M0 9.83437V148.366C0 155.576 7.63653 160.224 14.0397 156.911L137.267 85.0624C144.538 81.3003 144.089 70.756 136.527 67.6256L13.2997 0.944402C12.0764 0.439044 10.8291 0.204499 9.61384 0.204499C4.53419 0.202494 0 4.30151 0 9.83437Z" fill="url(#paint2)" transform='translate(-50 -80)' | |
/> | |
<defs> | |
<linearGradient id="paint1" x1="90%" y1="10%" x2="10%" y2="90%" > | |
<stop offset="0" stop-color="#00F2E0"/> | |
<stop offset="20%" stop-color="#017AFF"/> | |
<stop offset="50%" stop-color="#FA3FA5"/> | |
<stop offset="90%" stop-color="#FFA61D"/> | |
<stop offset="100%" stop-color="#FEFF00"/> | |
<animate id="anim1" attributeName="x1" dur="10s" from="90%" to="20%" begin="0s; anim2.end" fill="freeze"/> | |
<animate id="anim2" attributeName="x1" dur="10s" from="20%" to="90%" begin="anim1.end" fill="freeze"/> | |
</linearGradient> | |
<linearGradient id="paint2" x1="100%" y1="00%" x2="0%" y2="100%"> | |
<stop offset="0" stop-color="#00F2E0"/> | |
<stop offset="10%" stop-color="#017AFF"/> | |
<stop offset="50%" stop-color="#FA3FA5"/> | |
<stop offset="90%" stop-color="#FFA61D"/> | |
<stop offset="100%" stop-color="#FEFF00"/> | |
</linearGradient> | |
<linearGradient id="repeat"xlink:href="#paint2"spreadMethod="repeat" /> | |
<linearGradient id="paint3" > | |
<stop offset="0.0565613" stop-color="#00F2E0"/> | |
<stop offset="0.128837" stop-color="#0076FE"/> | |
<stop offset="0.190234" stop-color="#F54AB2"/> | |
<stop offset="0.272982" stop-color="#FEED07"/> | |
<stop offset="0.350254" stop-color="#F340A8"/> | |
<stop offset="0.432681" stop-color="#0075FC"/> | |
<stop offset="0.53372" stop-color="#00F2E0"/> | |
<stop offset="0.644791" stop-color="#0077FF"/> | |
<stop offset="0.737128" stop-color="#FF3EA3"/> | |
<stop offset="0.807227" stop-color="#FEFF00"/> | |
<stop offset="0.890742" stop-color="#EC42AA"/> | |
<stop offset="0.968214" stop-color="#356DEC"/> | |
</linearGradient> | |
<filter id="f1" x="0" y="0"> | |
<feGaussianBlur stdDeviation="20" result="blur" /> | |
</filter> | |
<ref id="paramStroke" param="stroke-width" default="50"/> | |
</defs> | |
</svg> | |
</div> |
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
BODY { | |
background: #111; | |
padding: 0; | |
margin: 0; | |
} | |
DIV { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
width: 100%; | |
height: 100%; | |
margin: auto; | |
} | |
.g-circles circle { | |
transform-origin: 0px 0px; | |
transform: rotate(0); | |
animation: rotation 50s infinite ; | |
} | |
circle:hover { | |
stroke: #FEFF00; | |
filter: | |
// hue-rotate(-40deg) | |
drop-shadow(0 0 5px #FFA61D); | |
} | |
.play { | |
transition: transform .5s ease; | |
} | |
.play:hover { | |
// transform: scale(1.2); | |
fill: #FEFF00; | |
filter: | |
// blur(20px); | |
drop-shadow(0 0 40px #FFA61D); | |
} | |
@for $i from 1 through 15 { | |
.g-circles circle:nth-child(#{$i}){ | |
animation-delay: #{$i}s; | |
} | |
} | |
@keyframes rotation { | |
100% { | |
transform: rotate(360deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment