Оформление SVG-фигур / Спасательный круг, часть 2 [16/20]
×

Спасательный круг, часть 2 [16/20]

Отлично, первый «слой» объекта готов. Он будет выступать серой рамкой спасательного круга.

Давайте теперь создадим второй слой, который будет являться «раскрашенной» частью круга. Обводка этого второго круга будет немного меньше, чем первого.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<svg width="200" height="200"> <circle r="70" cx="100" cy="100" fill="none" stroke="lightgrey" stroke-width="55"/> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. В SVG после первой добавьте вторую окружность с радиусом 70 и координатами центра по обеим осям 100,
  2. уберите заливку окружности и задайте цвет обводки tomato,
  3. а затем задайте толщину обводки 50.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #17, который стартует 10 апреля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.