<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" />
  
path id="i" d="M259.5 38.4v140c0 11.1 9 20.2 20.2 20.2s20.2-9 20.2-20.2v-140h-40.4z"/>
  
circle id="i-test" cx="279.7" cy="38.4" x="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"/>
  
<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"/></svg>
@import "compass/css3";

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

}

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


#circle-big {
  fill: #ff0000;
  opacity: 0.9;
}

#wp {
  fill: #005c80;
 }

.i-test {
  width: 40.4px;
  height:0px;
  fill: #0000ff;  
	animation-name: animation01;
	animation-duration: 10s;
	animation-iteration-count : infinite;
  opacity: 0.9;
}

@keyframes animation01 {
   
  0% {
        height: 40.4px;  
            fill: white;  
    }
      
    100% {
        height: 175px;
        fill: #0000ff;  
      
    }
  
}

#circle-i {
  fill: #00ff00;
}

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



Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.