<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 288" class="card">
 
  
<path id="nine" d="M406.7 77.8c-3.7-8.9-10-16.3-17.8-21.7-7.8-5.3-17.4-8.4-27.5-8.4-6.8 0-13.3 1.4-19.2 3.9-8.9 3.7-16.3 10-21.7 17.8-5.3 7.8-8.4 17.4-8.4 27.5 0 6.8 1.4 13.3 3.9 19.2 3.7 8.9 10 16.3 17.8 21.7 7.8 5.3 17.4 8.4 27.5 8.4 1.5 0 3-.1 4.5-.2l-36.7 88.6h28.4l48-115.9c3.2-6.6 5-13.9 5-21.7.1-6.8-1.3-13.3-3.8-19.2zm-23.4 25.9l-1.6 4c-1.8 3.4-4.4 6.3-7.5 8.4-3.7 2.5-8 3.9-12.9 3.9-3.2 0-6.2-.6-9-1.8-4.1-1.7-7.7-4.7-10.1-8.4-2.5-3.7-3.9-8-3.9-12.9 0-3.2.6-6.2 1.8-9 1.7-4.1 4.7-7.7 8.4-10.1 3.7-2.5 8-3.9 12.9-3.9 3.2 0 6.2.6 9 1.8 4.1 1.7 7.7 4.7 10.1 8.4 2.5 3.7 3.9 8 3.9 12.9-.1 2.4-.4 4.6-1.1 6.7z" />

  

<circle id="circle-big" cx="193.4" cy="205.7" r="61" />
  
<path id="two" d="M109.8 156.1c2.8-4.2 6.4-9.6 9.4-16 1.5-3.2 2.9-6.7 3.9-10.5s1.6-7.9 1.6-12.3c0-5.7-1.1-11.2-3-16.4-3-7.7-8-14.7-15-19.8-3.5-2.6-7.4-4.6-11.7-6-4.3-1.4-8.9-2.2-13.7-2.2-6.2 0-12.2 1.3-17.6 3.6-8 3.5-14.6 9.4-19 16.5s-6.8 15.5-6.8 24.2v.5h26.3v-.5c0-5.2 1.9-9.8 4.9-13 1.5-1.6 3.2-2.9 5.2-3.7 2-.9 4.3-1.4 7-1.4s5 .5 7 1.5c1.5.7 2.9 1.6 4.1 2.7 1.8 1.7 3.4 3.8 4.4 6.2 1.1 2.4 1.6 5.1 1.6 7.8 0 1.8-.3 3.6-.8 5.6-.8 2.9-2.1 6.1-3.9 9.3-1.7 3.1-3.8 6.3-5.8 9.3l-57.9 82v17.6h90.1v-26.2H68.2l41.3-58.5.3-.3z"/>

  
 <rect class="i-shadow"  x="259.5" y="-150" rx="20.2" ry="20.2" />
  
 <rect class="i-test"  x="259.5" y="18.2" rx="20.2" ry="20.2" />
   
<circle id="circle-i" cx="279.7" cy="38.4" r="20.2" /> 

<path id="wp" d="M233.4 18.2c-11.1 0-20.2 9.1-20.2 20.2s9.1 20.2 20.2 20.2 20.2-9.1 20.2-20.2-9.1-20.2-20.2-20.2m-18.2 20.2c0-2.6.6-5.1 1.6-7.4l8.7 23.7c-6.1-2.9-10.3-9.1-10.3-16.3m18.2 18.1c-1.8 0-3.5-.3-5.1-.7l5.4-15.8 5.6 15.3c0 .1.1.2.1.2-1.9.7-3.9 1-6 1m2.5-26.6c1.1-.1 2.1-.2 2.1-.2 1-.1.9-1.6-.1-1.5 0 0-2.9.2-4.8.2-1.8 0-4.8-.2-4.8-.2-1-.1-1.1 1.4-.1 1.5 0 0 .9.1 1.9.2l2.8 7.7-4 11.9-6.6-19.6c1.1-.1 2.1-.2 2.1-.2 1-.1.9-1.6-.1-1.5 0 0-2.9.2-4.8.2h-1.2c3.2-4.9 8.8-8.2 15.2-8.2 4.7 0 9 1.8 12.2 4.8h-.2c-1.8 0-3 1.6-3 3.2 0 1.5.9 2.8 1.8 4.3.7 1.2 1.5 2.8 1.5 5 0 1.6-.5 3.5-1.4 5.9l-1.8 6-6.7-19.5zm6.6 24.2l5.5-16c1-2.6 1.4-4.7 1.4-6.5 0-.7 0-1.3-.1-1.9 1.4 2.6 2.2 5.5 2.2 8.7 0 6.7-3.6 12.5-9 15.7"/>
  
  

</svg>
@import "compass/css3";

body {
background: url("https://ponchantest.blog/wp-content/uploads/2019/01/bgl.jpg"); 
background-color: rgba(225,225,225,0.5);   
margin: 0px;
padding: 0px; 
background-size: contain;
background-repeat: no-repeat;  
  
}




.i-shadow {
  width: 40.4px;
  height:348.519px;
  fill: #555555;
  transform-origin: 64.7453% 61.9243056%;
  animation-name: animation02;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  mix-blend-mode: difference;
  opacity: 0.7;
  
}


@keyframes animation02 {
  0% {
        transform: rotate(0deg);
    }
   
  100% {
        transform: rotate(360deg);
    }
}



#two {
  fill: #ffffff;
  opacity: 0.8;
}



#circle-big {
  fill: #ffffff;
  opacity: 0.8;
}


#wp {
  fill: #005c80;
 }


.i-test {
  width: 40.4px;
  height:180px;
  fill: #ffffff;
}


#circle-i {
  fill: #d42c81;
}


#nine {
  fill: #ffffff;
  opacity: 0.8;
}



Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.