<svg height="100" width="100">
  <circle id="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
</svg>

#circle{
                stroke-dasharray: 1000;
                stroke-dashoffset: 2000;
                fill: #FFFFFF;
                stroke: #000000;
            }
            svg:hover #circle{
                -webkit-animation: draw 3s forwards;
                animation: draw 3s;
            }
            @keyframes draw{
                from{
                    stroke-dashoffset: 1000;
                    fill:#efefef;
                    stroke:#ff5535;
                }
                to{
                    stroke-dashoffset: 0;   
                }
            }
            @-webkit-keyframes draw{
                from{
                    stroke:#ff5535;
                    stroke-dashoffset: 1000; 
                }
                to{
                    stroke-dashoffset: 0;   
                }
            }