无法弄清楚这个svg动画

我一直在尝试让舞台上的圆圈围绕椭圆移动，我什至从具有非常相似设置但没有骰子的人那里复制了代码。下面是代码笔和标记。

http://codepen.io/alcoven/pen/XJXMNW

<div id="wrapper">
  <div class="container">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
    <!--<g>
        <circle fill="#F26451" cx="17.6" cy="3.3" r="1.4"/>
    </g>
    <g>
        <circle fill="#F26451" cx="6.4" cy="23.1" r="1.4"/>
    </g>-->
    <line class="line" stroke-width="1.3" stroke-miterlimit="10" x1="3.7" y1="26.1" x2="26.2" y2="3.6"/>
    <path class="vertical" d="M9.9,14.9a5,14 0 1,0 10,0a5,14 0 1,0 -10,0"/>
    <ellipse class="_x34_5deg" transform="matrix(0.5037 0.8639 -0.8639 0.5037 20.2917 -5.4991)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
    <ellipse class="_x2D_45deg" transform="matrix(-0.5037 0.8639 -0.8639 -0.5037 35.3327 9.5202)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
    <path class="circlet" d="M16.4,3.2a1.3,1.3 0 1,0 2.6,0a1.3,1.3 0 1,0 -2.6,0"/>
    <path class="circleb" d="M5,23.2a1.4,1.4 0 1,0 2.8,0a1.4,1.4 0 1,0 -2.8,0"/>
    </svg>
  </div>
</div>

.CSS

#wrapper {
  top:0;
  left:0;
  position:absolute;
  width:100%;
  height:100%;
  background:#F26451;
}
.container {
  width:100%;
  position:fixed;
  top:30%;
  bottom:70%;
}
svg {
  width:100px;
  height:auto;
  margin:10% auto;
  display:block;
}
line, .vertical, ellipse._x34_5deg, ellipse._x2D_45deg {
  stroke:#fff;
  fill:none;
  stroke-width:1.3;
  stroke-miterlimit:10;
}
.circlet, .circleb {
  stroke:#fff;
  fill:#F26451;
  stroke-width:1.3;
  stroke-miterlimit:10;
}
.line {
  display:none;
}

.JS

(function($){
  $('[class^="circle-"]').animate({opacity:1},500);
// get the animation path node
var $path = $('.vertical'), path = $path[0];
var $path2 = $('.vertical'), path2 = $path2[0];
// get the animation object node
var $obj = $('.circlet');
var $obj2 = $('.cirlceb');
// get path's length
var pathLength = path.getTotalLength();
var pathLength2 = path2.getTotalLength();
// create new tween by initializing TWEEN.Tween object from 0 
var tween = new TWEEN.Tween({ length: 0  })
    // to path length
    // in 2000 milliseconds
    .to({ length: pathLength }, 1500)
    // on update callback fires on every tick
    .onUpdate(function(){
      var point = path.getPointAtLength(this.length);
      $obj.css({
        'transform': 'translate('+ point.x + 'px,'+ point.y +'px)'
      });
    }).repeat(999999999).start();
var tween2 = new TWEEN.Tween({ length: 0  })
// to path length
// in 2000 milliseconds
.to({ length: pathLength2 }, 1500)
// on update callback fires on every tick
.onUpdate(function(){
  var point2 = path2.getPointAtLength(this.length);
  $obj2.css({
    'transform': 'translate('+ point2.x + 'px,'+ point2.y +'px)'
  });
}).repeat(999999999).start();
// animate loop
animate = function(){
  requestAnimationFrame(animate)
  TWEEN.update()
}
//start the animation loop
animate()
  }(jQuery));

无法完全弄清楚为什么这不起作用，不确定是我的js还是我的svg设置方式，请帮助：]

这是我复制 http://codepen.io/joshy/pen/cojbD 的 js