body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 0%, rgba(0,0,0,1) 100%);
}

*{margin:0;padding:0; box-sizing: border-box}
body{min-height:100vh;display: flex;align-items: center;justify-content:center;flex-direction: column}
.allflag{
  stroke: #000;
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  will-change: stroke-dashoffset;
  animation: stroke 3s ease forwards;
  cursor: pointer;
}
.allflag:hover{
  stroke-width: 3;
}
.flag{
  fill: transparent;
  will-change: fill;
  animation: fillall 0s ease 3s forwards;
}
.part{
  stroke-width: 0;
  fill: transparent;
  will-change: fill;
  animation: fillpart 0s ease 3s forwards;
}
@keyframes stroke{
  100%{
    stroke-dashoffset: 0;
  }
}
@keyframes fillall{
  100%{
    fill: url("#fill");
  }
}
@keyframes fillpart{
  100%{
    fill: #f00;
  }
}