Styling the joystick can be done through standard CSS. There are two classes, .joystick and .stick.

.joystick-1 {
    height: 200px;
    width: 200px;
    display: inline-block;
    border: 3px solid white;
    margin: 50px 100px;
    position: relative;
    border-radius: 100%;
}

.joystick-1:before {
    content: "";
    position: absolute;
    height: 90%;
    width: 90%;
    border: 1px dashed white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
}

.joystick-1:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    background: white;
    margin-top: 3px;
    transform: rotate(90deg);
}

.joystick-1 span {
    position: absolute;
    height: 30%;
    width: 30%;
    background: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    pointer-events: none !important;
}

Square

There is no rule for a joystick to be round. The shape of the joystick does not infect the values in any way.

.joystick-2 {
    height: 100px;
    width: 100px;
    display: inline-block;
    border: 3px dashed white;
    margin: 50px 100px;
    position: relative;
}

.joystick-2 span {
    position: absolute;
    height: 40%;
    width: 40%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    pointer-events: none !important;
    background-image: url(insert-cat-image);
    background-size: cover;
}

styling

Square