JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
<div ng-app="app">
    <div ng-controller="MyCtrl">
        <svg width="800" height="500">
          <circle once-bind ng-repeat="p in elems"
             ng-attr-cx="{{::p.cx}}" ng-attr-cy="{{::p.cy}}"
             ng-attr-fill="{{::p.fill}}" ng-attr-r="{{::p.r}}">
          </circle>
        </svg>
    </div>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('MyCtrl', function ($scope) {
    function init() {
        $scope.elems = (function () {
            var radius = 20,
                maxCount = 200,
                elems = [];
            var colors = ["#f00", "#0f0", "#00f"];

            for (var i = 0; i < maxCount; i++) {
                elems.push({
                    cx: i,
                    cy: i,
                    r: radius,
                    fill: colors[i % colors.length]
                });
            }
            
            return elems;
        }());
    }
    
    init();
});