// Create SVG root
var container = Pablo(demoElement),
 svg = container.svg({height:120}),
 // Array of IDs
 ids = ['rebbie', 'jackie', 'tito', 'jermaine',
 'la-toya', 'marlon', 'michael', 'randy', 'janet'],
 // 9 <circle>'s
 circles = Pablo.circle().duplicate(8),
 // Text label
 label = svg.text({
 y:100,
 'font-size':'30px',
 'font-family':'sans-serif'
 }),
 // <g> group element
 jacksons = svg.g({id:'jacksons'})
 // Change label on interaction
 .on('mouseover touchstart', function(event){
 label.content(event.target.id);
 })
 // Append children and switch to children context
 .append(circles, {
 id: ids,
 r: 30, cy: 30,
 cx: function(el, i){return 40 * i + 30;},
 fill: function(el){
 return el.id === 'michael' ?
 'gold' : 'rgba(90,30,30,0.5)';
 }
 }),
 // Child nodes
 children = jacksons.children();
// Change label to '9 jacksons'
label.content(children.length + ' ' + jacksons.attr('id'));
// Set background colour
container.css({'background':'white'});

var svg = Pablo(demoElement).svg({height: 60});
svg.append(Pablo.circle({r: 30, cx: 30, cy: 30}))
 .append(Pablo.circle({foo: 'bar', r: 30, cx: 100, cy: 30}));
setTimeout(function () {
 svg.children('circle[foo=bar]').attr('fill', 'red');
}, 1600);

var svg = Pablo(demoElement).svg({height: 60});
svg.append(Pablo.circle({r: 30, cx: 30, cy: 30}))
 .append(Pablo.circle({foo: 'bar', r: 30, cx: 100, cy: 30}));
setTimeout(function () {
 svg.children(function (item) {
 if (Pablo(item).attr('foo')) {
 return item;
 }
 }).attr('fill', 'red')
}, 1600);