Реализация дерева на HTML

Пожалуйста помогите.Суть проблемы: есть 2 формы, в которые можно ввести только числовые значения, в первую форму вводиться целое число и на странице рисуются квадраты связанные между собой линией, число квадратов зависит от введённого числа в форму, во вторую форму вводиться целое число и из первого квадрата расходятся шары соединённые с квадратом линией, число шаров зависит от введённого числа в поле. Можно ли всё это реализовать на чистом html и css без javascript, если можно то не могли бы вы скинуть примеры реализации или статьи где можно об этом почитать, если не обойтись без javascript, то скинте примеры с ним.

Схема