SVG Overflow

want to make overflowed SVG parts hidden

by djaspar

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container shadow-lg">
    <div class="bg">
    <svg class="head_bg1" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#614385;stop-opacity:1"/>
                <stop offset="100%" style="stop-color:#516395;stop-opacity:1"/>
            </linearGradient>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
    </svg>
    </div>
</div>

CSS

body{
    overflow: hidden;
}
.container {
    margin-top: 5%;
    width: 1200px;
    height: 625px;
    border-radius: 4px;
    background-color: #FFFFFF;
    overflow: hidden;
}

.bg {
    position: absolute;
    display: inline-block;
    right: 10px;
    top: 20px;
    width: 30vw;
    height: 30vw;
    overflow: hidden;
}