.pot{
    stroke:none;
    stroke-width:0.25;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    animation: dash 6s linear;
    animation-fill-mode: forwards;
    z-index: 0;
}

.cls-1{
    animation: fillPot1 0s;
    animation-fill-mode: forwards;
    fill: orange;
}

.cls-2{
    animation: fillPot2 0s;
    stroke: black;
    animation-fill-mode: forwards;
    fill:#42210b;
}
.cls-3{
    stroke: white;
    fill:#fff;}
.cls-4{
    animation: fillPot4 9s;
    stroke: black;
    animation-fill-mode: forwards;
    fill:#006837;}
.cls-5{
    stroke: black;
    animation: fillPot5 9s;
    animation-fill-mode: forwards;
    fill:#8cc63f;}

.cls-6{fill-rule:evenodd;}
.cls-6{
    animation: fillPot6 9s;
    stroke: black;
    animation-fill-mode: forwards;
    fill:#d9e021;}

@keyframes dash {
    from {
      stroke-dashoffset: 2000;
    }
    to {
      stroke-dashoffset: 50;
    }
  }

  @keyframes fillPot1 {
    from {
        fill: white;
    }
    to {
        fill: orange;
    }
  }
  @keyframes fillPot2 {
    from {
        fill: white;
    }
    to {
        fill:#42210b;
    }
  }
  @keyframes fillPot3 {
    from {
        fill: white;
    }
    to {
        fill: gold;
    }
  }
  @keyframes fillPot4 {
    from {
        fill: white;
    }
    to {
        fill:#006837;
    }
  }
  @keyframes fillPot5 {
    from {
        fill: white;
    }
    to {
        fill: #8cc63f;
    }
  }
  @keyframes fillPot6 {
    from {
        fill: white;
    }
    to {
        fill: #d9e021;
    }
  }