Рисование на CSS: создаем сложные иконки без использования SVG

Привет! Наливай себе кофе, садись поудобнее. Сегодня мы поговорим об искусстве, которое многие считают безумием, а продвинутые разработчики — признаком высшего пилотажа. Речь пойдет о рисовании сложных интерфейсных иконок исключительно силами CSS.

Казалось бы, зачем это нужно, когда есть SVG? Но представь реальный кейс: у тебя высоконагруженный проект, строгий бюджет на размер бандла, а дизайнер требует плавные интерактивные микроанимации при наведении на иконки (например, чтобы радар пульсировал, а шестеренка внутри него вращалась). Тащить ради этого тяжелую JS-библиотеку для анимации SVG или плодить десятки инлайновых тегов, забивающих DOM? Ну уж нет. Мы решим эту задачу элегантно, быстро и исключительно силами современного CSS.

Как мы страдали раньше

Если ты помнишь веб десятилетней давности, то наверняка содрогнешься от воспоминаний о CSS-спрайтах. Огромные простыни картинок, где малейший сдвиг на один пиксель превращал иконку корзины в кусок бензоколонки.

Когда пришла эпоха плоского дизайна, мы начали извращаться: плодили кучу пустых тегов <span>, позиционировали их абсолютно, крутили через transform: rotate() и пытались склеить из этого подобие интерфейсных стрелочек или крестиков. Стоило изменить размер шрифта или контейнера, как вся эта конструкция из костылей и изоленты расползалась на глазах. А если нужно было поменять цвет иконки при переключении темы, приходилось вручную переписывать свойства десятка селекторов. О том, насколько проще все стало сейчас, можно почитать в статье про использование кастомных свойств для динамического изменения тем.

Как делать правильно в 2026 году

Современный CSS дает нам невероятную мощь. Сегодня, чтобы нарисовать сложную иконку вроде работающего радара или футуристичного виджета, нам нужен всего один HTML-элемент.

Секрет успеха кроется в синергии трех технологий:

Множественные градиенты: с помощью radial-gradient(), conic-gradient() и linear-gradient() мы можем создавать сложные геометрические узоры прямо внутри одного свойства background.
CSS-переменные: они делают нашу иконку живой и масштабируемой. Поскольку переменные (CSS Variables) — это основа масштабируемого дизайна, мы завязываем все размеры, цвета и скорости анимации на кастомные свойства.
Псевдоэлементы ::before и ::after: они выступают в роли дополнительных слоев для создания объема, бликов или движущихся деталей.

Давай создадим эффектную интерактивную иконку «Футуристичный радар». Она будет состоять из концентрических кругов, светящегося центра и сканирующего луча, который плавно вращается. И все это — на одном-единственном HTML-теге!

Готовый сниппет кода

Ниже представлен чистый, рабочий код. Ты можешь просто скопировать его в свой проект и сразу увидеть магию в действии.

<!-- HTML-разметка: всего один чистый тег! -->
<div class="css-icon-radar"></div>

<style>
.css-icon-radar {
  /* API нашей иконки — управляем всем через переменные */
  --radar-size: 100px;
  --radar-color: #00f0ff;
  --radar-bg: rgba(0, 240, 255, 0.05);
  --speed: 3s;

  width: var(--radar-size);
  height: var(--radar-size);
  display: inline-block;
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  
  /* Рисуем сетку радара с помощью множественных радиальных градиентов */
  background: 
    radial-gradient(circle, var(--radar-color) 4%, transparent 5%),
    radial-gradient(circle, transparent 30%, var(--radar-color) 31%, var(--radar-color) 33%, transparent 34%),
    radial-gradient(circle, transparent 60%, var(--radar-color) 61%, var(--radar-color) 63%, transparent 64%),
    var(--radar-bg);
  
  border: 2px solid var(--radar-color);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
  overflow: hidden;
  transition: all 0.4s ease;
  cursor: pointer;
}

/* Эффект наведения: радар ускоряется и начинает светиться ярче */
.css-icon-radar:hover {
  --radar-color: #ff007f;
  --radar-bg: rgba(255, 0, 127, 0.08);
  --speed: 1.5s;
  filter: drop-shadow(0 0 15px var(--radar-color));
}

/* Создаем сканирующий луч через конический градиент */
.css-icon-radar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--radar-color) 0deg, transparent 180deg);
  opacity: 0.35;
  animation: radar-sweep var(--speed) linear infinite;
  pointer-events: none;
}

/* Анимация вращения луча */
@keyframes radar-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

Частая ошибка новичков

Самый частый фейл, который я вижу на код-ревью у мидлов — это жестко захардкоженные размеры в пикселях (px) внутри сложных CSS-фигур.

Если ты прописываешь width: 80px, а затем внутри позиционируешь элементы через left: 32px и top: 15px, то твоя иконка становится абсолютно неадаптивной. Попытка изменить её размер до 120px превратит красивый дизайн в кашу, потому что внутренние отступы останутся прежними.

Как надо: всегда привязывай внутренние размеры к базовой переменной (например, --radar-size) с помощью функции calc() или используй относительные единицы вроде % и em. Тогда масштабирование иконки сведется к изменению всего одной строчки кода, а вся геометрия пересчитается браузером автоматически.

Пробуй, экспериментируй с градиентами и не бойся чистого CSS — он умеет гораздо больше, чем кажется на первый взгляд!

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!