Код IT Загрузка примера кода…

HTML main.html 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Цветок SVG</title>
  <style>
    body { margin: 0; display: grid; place-items: center; min-height: 100dvh; background: #fdf2f8; }
  </style>
</head>
<body>
  <svg width="260" height="260" viewBox="0 0 260 260" role="img" aria-label="Цветок из кругов">
    <g transform="translate(130 130)">
      <!-- 6 лепестков по кругу радиуса 50 -->
      <circle cx="50" cy="0" r="22" fill="#f472b6"/>
      <circle cx="25" cy="43" r="22" fill="#f472b6"/>
      <circle cx="-25" cy="43" r="22" fill="#f472b6"/>
      <circle cx="-50" cy="0" r="22" fill="#f472b6"/>
      <circle cx="-25" cy="-43" r="22" fill="#f472b6"/>
      <circle cx="25" cy="-43" r="22" fill="#f472b6"/>
      <!-- серединка -->
      <circle cx="0" cy="0" r="18" fill="#facc15"/>
    </g>
  </svg>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Цветок SVG</title>
  <style>
    body { margin: 0; display: grid; place-items: center; min-height: 100dvh; background: #fdf2f8; }
  </style>
</head>
<body>
  <svg width="260" height="260" viewBox="0 0 260 260" role="img" aria-label="Цветок из кругов">
    <g transform="translate(130 130)">
      <!-- 6 лепестков по кругу радиуса 50 -->
      <circle cx="50" cy="0" r="22" fill="#f472b6"/>
      <circle cx="25" cy="43" r="22" fill="#f472b6"/>
      <circle cx="-25" cy="43" r="22" fill="#f472b6"/>
      <circle cx="-50" cy="0" r="22" fill="#f472b6"/>
      <circle cx="-25" cy="-43" r="22" fill="#f472b6"/>
      <circle cx="25" cy="-43" r="22" fill="#f472b6"/>
      <!-- серединка -->
      <circle cx="0" cy="0" r="18" fill="#facc15"/>
    </g>
  </svg>
</body>
</html>