CSS: How can I make 'overflow: hidden' work together with 'border-radius: 50%'?

Question

I have this animation with JavaScript and Sass-CSS:

var field = document.querySelector('.field');
var starCount = 1000;

function addStar(parent, maxX, maxY) {
  var x = Math.floor(Math.random() * (maxX + 1));
  var y = Math.floor(Math.random() * (maxY + 1));
  var randomNumber = Math.random();
  
  var star = document.createElement('div');
  var starTop = document.createElement('div');
  var starBottom = document.createElement('div');
  var styleValue = 'left: ' + x + 'px; top: ' + y + 'px;';
  var starKind = '';
  //debugger;
  if (randomNumber < 0.25) {
    starKind = 'large-star';
  } else if (randomNumber < 0.5) {
    starKind = 'medium-star';
  } else if (randomNumber < 0.75) {
    starKind = 'small-star';
  } else {
    starKind = 'tiny-star';
  }
  
  starTop.classList.add(starKind + '-top');
  starBottom.classList.add(starKind + '-bottom');
  
  star.appendChild(starTop);
  star.appendChild(starBottom);
    
  star.setAttribute('style', styleValue);
  star.classList.add('star');
  star.classList.add(starKind);
  
  parent.appendChild(star);
  
  return star;
}

for (let i = 0; i < starCount; i++) {
  addStar(field, 4000, 400);
}

* {
  padding: 0;
  border: 0;
  margin: 0; }

body {
  background-color: black; }

.wrap {
  width: 100%;
  max-width: 800px;
  height: 200px;
  margin: 50px auto;
  overflow: hidden;
  border: 2px solid white;
  border-radius: 50%;
  line-height: 0;
  padding: 0 20px; }

.field {
  height: 200px;
  position: relative;
  background-color: #000000;
  animation: moveGlass 50s ease-in infinite alternate;
  display: inline-block; }

.star {
  background-color: white;
  opacity: 1.0;
  position: absolute;
  animation: rotateStar 2s infinite alternate; }

.star .large-star-top:before {
  left: -5px;
  top: -5px; }

.star .large-star-top:after {
  right: -5px;
  top: -5px; }

.star .large-star-bottom:before {
  left: -5px;
  bottom: -5px; }

.star .large-star-bottom:after {
  right: -5px;
  bottom: -5px; }

.star .large-star-top:before, .star .large-star-top:after,
.star .large-star-bottom:before, .star .large-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%; }

.star .medium-star-top:before {
  left: -4px;
  top: -4px; }

.star .medium-star-top:after {
  right: -4px;
  top: -4px; }

.star .medium-star-bottom:before {
  left: -4px;
  bottom: -4px; }

.star .medium-star-bottom:after {
  right: -4px;
  bottom: -4px; }

.star .medium-star-top:before, .star .medium-star-top:after,
.star .medium-star-bottom:before, .star .medium-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 8px;
  height: 8px;
  border-radius: 50%; }

.star .small-star-top:before {
  left: -3px;
  top: -3px; }

.star .small-star-top:after {
  right: -3px;
  top: -3px; }

.star .small-star-bottom:before {
  left: -3px;
  bottom: -3px; }

.star .small-star-bottom:after {
  right: -3px;
  bottom: -3px; }

.star .small-star-top:before, .star .small-star-top:after,
.star .small-star-bottom:before, .star .small-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 6px;
  height: 6px;
  border-radius: 50%; }

.star .tiny-star-top:before {
  left: -2px;
  top: -2px; }

.star .tiny-star-top:after {
  right: -2px;
  top: -2px; }

.star .tiny-star-bottom:before {
  left: -2px;
  bottom: -2px; }

.star .tiny-star-bottom:after {
  right: -2px;
  bottom: -2px; }

.star .tiny-star-top:before, .star .tiny-star-top:after,
.star .tiny-star-bottom:before, .star .tiny-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 4px;
  height: 4px;
  border-radius: 50%; }

.star.large-star {
  width: 10px;
  height: 10px; }

.star.medium-star {
  width: 8px;
  height: 8px; }

.star.small-star {
  width: 6px;
  height: 6px; }

.star.tiny-star {
  width: 4px;
  height: 4px; }

@keyframes rotateStar {
  0% {
    transform: rotate(0deg);
    opacity: 0.09; }
  10% {
    transform: rotate(36deg);
    opacity: 0.18; }
  20% {
    transform: rotate(72deg);
    opacity: 0.27; }
  30% {
    transform: rotate(108deg);
    opacity: 0.36; }
  40% {
    transform: rotate(144deg);
    opacity: 0.45; }
  50% {
    transform: rotate(180eg);
    opacity: 0.54; }
  60% {
    transform: rotate(216deg);
    opacity: 0.63; }
  70% {
    transform: rotate(248deg);
    opacity: 0.72; }
  80% {
    transform: rotate(284deg);
    opacity: 0.81; }
  90% {
    transform: rotate(320deg);
    opacity: 0.9; }
  100% {
    transform: rotate(356deg);
    opacity: 1.0; } }
@keyframes moveGlass {
  100% {
    margin-left: -3200px; } }

<div class="wrap">
  <div class="field"></div>
</div>

I use border-radius with 50% to get the elliptic "window".

I would like the ribbon with animated stars to move after the elliptic window.

How can I accomplish the desired effect?

As one can see the elements move over the area which would normally covered from the rectangular div. But the elements shall "stay" within the window. So I have defined an 'overflow: hidden' on the parent element.

Animation on Google Chrome

On these prototype (needs a bit to load the image from the service) it works perfectly well: http://codepen.io/mizech/pen/gwokqv

What do I wrong the stars-animation? Why is 'overflow: hidden' not working?