life2film.com new logo pattern

index.html

<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>

life2film-com-new-logo-pattern.markdown

life2film.com new logo pattern

New logo design for life2film.com with svg animation pattern

A Pen by rustam on CodePen.

License.

style.scss

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);
  }
}