SVG <circle> element отвечает за вывод базовой фигуры – окружности.

Атрибут	Описание
cx	координата центра окружности по оси абцисс
cy	координата центра окружности по оси ординат
r	радиус окружности
style	стиль оформления окружности

На рисунке ниже показано, как можно оформлять внешний вид при помощи <style>

Центр окружности поз.4 Рис.1 находится на нижней границе viewBox равной 400px, поэтому выводится только верхняя половина окружности.

Для отрисовки светофора использовались только окружности и прямоугольники.
В следующем примере см. Рис.1 для создания образа “глаз” использовано всего четыре окружности разного цвета. Код в листинге ниже для левого глаза.

Для отрисовки примера садового шланга, см. Рис.1, использовано 12 окружностей, центр каждой из которых сдвигался на 5 пикселей вправо и вверх относительно центра предыдущей окружности.

Генератор окружностей

⇚ SVG rect element SVG ellipse element ⇛