← Каталог
SVG — рисунки кодом — Простой цветок из кругов
Фрагмент из «SVG — рисунки кодом»: Простой цветок из кругов.
<!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>