SVG 유튜브 버튼

by Kim Ara

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="500px">
 
	<rect class="rect" x="47.255" y="55" fill="none" stroke="#000000" stroke-width="3" width="116" height="116"/>
	<polygon class="triangle" points="130.471,113 108.254,125.826 86.039,138.652 86.039,113 86.039,87.348 108.254,100.174 "/>

</svg>

CSS

.rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: rect 5s linear forwards;
}

@keyframes rect {
  to {
    stroke-dashoffset: 0;
  }
}

.triangle{
	opacity:0;
	animation: tri 5s;
}
@keyframes tri {
  to {
    opacity:1
  }
}