<script src="http://www.polymer-project.org/platform.js"></script>

<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="traffic-light" attributes="go">

  <template>

    <style>

      :host {

        display: block;

      }

      svg {

        width: 500px;

        height: 500px;

      }

    </style>

    <svg>

      <template repeat="{{l in lights}}">

        <circle cx="100" cy="{{l.cy}}" r="50" fill="{{l.selectedColor}}"/>

      </template>

    </svg>

  </template>

  <script>

    Polymer('traffic-light', {

      idx: 0,

      go: false,

      ready: function() {

        this.lights = [

          {color: 'red', dark: 'maroon', cy: 80},

          {color: 'orange', dark: 'sienna', cy: 200},

          {color: 'lightgreen', dark: 'darkgreen', cy: 320}

        ];

        this.reset();

        if (this.go) {

          this.animate();

        }

      },

      reset: function() {

        this.lights.forEach(function(l, i) {

          l.selectedColor = l.dark;

        });

      },

      animate: function() {

        this.reset();

        var i = this.idx++ % this.lights.length;

        this.lights[i].selectedColor = this.lights[i].color;

        var time = 800 + Math.floor(Math.random() * 200 * this.lights.length);

        this.async(this.animate, null, time);

      }

    });

  </script>

</polymer-element>

​

<traffic-light go></traffic-light>

​