How to open crosshair and close it (Fallout 4 style)

So, I wanted to make a crosshair open up, and close, kind of like this.
I’ve tried stuff like

function OnGUI () {
    var posll : Vector3;
    var posul : Vector3;
    var poslr : Vector3;
    var posur : Vector3;
    if(crNormal) {
        GUI.DrawTexture(Rect(Screen.width/2-25,Screen.height/2-25,50,50), crosshair1);
    }else{
        var ur_start = Vector3(Screen.width/2-25,Screen.height/2-25,0);
        var ur_stop = Vector3(Screen.width/2,Screen.height/2,0);
        posur = Vector3.Lerp(ur_start, ur_stop, 5*Time.deltaTime);
        GUI.DrawTexture(Rect(posur.x, posur.y, 50, 50), cr_ur);
}

multiple times over for the different corners, but it just doesn’t work.
cr = crosshair, ur = upper right

Is there a better way I can go about doing this? Please help!

Is there a reason you’re using GUI instead of UI Canvas?

I’m not very familiar with UI Canvas, and GUI was the first thing I got to mind. How would you go around doing it in UI Canvas?? :S