Думаю в том, что DI-контейнер может по типу параметра (типу параметра в конструкторе или методе) сам подставить необходимый объект (используя рефлексию), а сервис-локатор так не умеет. Из-за этого DI-контейнер можно использовать как сервис-локатор, а наоборот - нельзя.
Каждый круг сделать дивом, позиционирование абсолютное назначить, все круги для удобства поместить в один див с позиционированием relative. Первое, что в голову пришло.
