348 lines
20 KiB
HTML
348 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>calls24 — Logo Concepts</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;padding:40px 20px}
|
|
h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px;color:#fff}
|
|
.sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
|
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:900px;margin:0 auto}
|
|
@media(max-width:600px){.grid{grid-template-columns:1fr}}
|
|
.card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
|
|
.card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
|
|
.card .name{font-size:14px;color:#ccc;margin-bottom:4px}
|
|
.card .desc{font-size:12px;color:#666;line-height:1.5;margin-bottom:20px}
|
|
.logo-row{display:flex;align-items:center;gap:24px;padding:24px;background:#0a0a0a;border-radius:12px;margin-bottom:8px}
|
|
.icon-row{display:flex;gap:16px;justify-content:center;padding:16px;background:#0a0a0a;border-radius:12px}
|
|
.icon-row svg{max-height:48px;max-width:48px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>calls24 — Logo Concepts</h1>
|
|
<p class="sub">5 вариантов логотипа • SVG • Pure code</p>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- Logo 01 -->
|
|
<div class="card">
|
|
<div class="label">01</div>
|
|
<div class="name">Wordmark + Sound Wave</div>
|
|
<div class="desc">Минималистичный словоформ с вертикальной аудио-волной слева. Зелёный акцент на «24».</div>
|
|
<div class="logo-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="160" height="30">
|
|
<defs>
|
|
<linearGradient id="w1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g transform="translate(4,5)">
|
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1)"/>
|
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1)" opacity="0.85"/>
|
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1)" opacity="0.7"/>
|
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1)" opacity="0.85"/>
|
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1)" opacity="0.6"/>
|
|
</g>
|
|
<text x="52" y="40" font-family="-apple-system,sans-serif" font-weight="700" font-size="32" fill="#ffffff">
|
|
calls<tspan fill="#22c55e">24</tspan>
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<defs>
|
|
<linearGradient id="w1b" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g transform="translate(3,3)">
|
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1b)"/>
|
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
|
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1b)" opacity="0.7"/>
|
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
|
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1b)" opacity="0.6"/>
|
|
</g>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<defs>
|
|
<linearGradient id="w1c" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g transform="translate(3,3)">
|
|
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="#000"/>
|
|
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="#000" opacity="0.85"/>
|
|
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="#000" opacity="0.7"/>
|
|
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="#000" opacity="0.85"/>
|
|
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="#000" opacity="0.6"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрный</div>
|
|
</div>
|
|
|
|
<!-- Logo 02 -->
|
|
<div class="card">
|
|
<div class="label">02</div>
|
|
<div class="name">Circle Sound Wave</div>
|
|
<div class="desc">Круглый значок с аудио-волной внутри. Иконка / фавикон.</div>
|
|
<div class="logo-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
|
<defs>
|
|
<linearGradient id="w2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="30" cy="30" r="28" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.15"/>
|
|
<rect x="25" y="14" width="10" height="32" rx="5" fill="url(#w2)"/>
|
|
<rect x="14" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
|
|
<rect x="6" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
|
|
<rect x="40" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
|
|
<rect x="48" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<circle cx="30" cy="30" r="28" fill="none" stroke="#000" stroke-width="2" opacity="0.15"/>
|
|
<rect x="25" y="14" width="10" height="32" rx="5" fill="#000"/>
|
|
<rect x="14" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
|
|
<rect x="6" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
|
|
<rect x="40" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
|
|
<rect x="48" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
|
</div>
|
|
|
|
<!-- Logo 03 -->
|
|
<div class="card">
|
|
<div class="label">03</div>
|
|
<div class="name">Phone + Wave</div>
|
|
<div class="desc">Трубка с исходящими звуковыми волнами. Прямая ассоциация со звонками.</div>
|
|
<div class="logo-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
|
<g transform="translate(5,2)">
|
|
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/>
|
|
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
|
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
|
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<g transform="translate(5,2)">
|
|
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#000" stroke-width="2.5" stroke-linejoin="round"/>
|
|
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/>
|
|
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
|
|
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
|
</div>
|
|
|
|
<!-- Logo 04 -->
|
|
<div class="card">
|
|
<div class="label">04</div>
|
|
<div class="name">Hex Data Grid</div>
|
|
<div class="desc">Гексагон с волной и точками данных. Bauhaus + tech.</div>
|
|
<div class="logo-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
|
<defs>
|
|
<linearGradient id="w4" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect x="14" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<rect x="22" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="30" y="14" width="6" height="38" rx="3" fill="url(#w4)"/>
|
|
<rect x="38" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="46" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<circle cx="33" cy="12" r="2" fill="#22c55e"/>
|
|
<circle cx="25" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
<circle cx="41" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<rect x="14" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
|
<rect x="22" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
|
<rect x="30" y="14" width="6" height="38" rx="3" fill="#000"/>
|
|
<rect x="38" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
|
<rect x="46" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
|
<circle cx="33" cy="12" r="2" fill="#000"/>
|
|
<circle cx="25" cy="18" r="2" fill="#000" opacity="0.5"/>
|
|
<circle cx="41" cy="18" r="2" fill="#000" opacity="0.5"/>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
|
</div>
|
|
|
|
<!-- Logo 05 -->
|
|
<div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
|
|
<div class="label">05</div>
|
|
<div class="name">C-Wave (Apple-like)</div>
|
|
<div class="desc">Буква «C» от calls24 → звуковая волна. Непрерывный path, чистая геометрия.</div>
|
|
<div class="logo-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
|
<defs>
|
|
<linearGradient id="w5" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="
|
|
M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50
|
|
C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32
|
|
C14 26,16 18,24 14 C30 10,42 10,48 14 Z
|
|
" fill="url(#w5)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<path d="M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50 C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32 C14 26,16 18,24 14 C30 10,42 10,48 14 Z" fill="#000"/>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
|
|
</div>
|
|
|
|
<!-- Logo 06 -->
|
|
<div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
|
|
<div class="label" style="color:#ef4444">06 ★</div>
|
|
<div class="name">Hexagon + C-Wave (комбинированный)</div>
|
|
<div class="desc">Гексагон (лого-04) + C-волна (лого-05). Волна красного #ef4444 как на странице. Точки данных по контуру.</div>
|
|
<div class="logo-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
|
|
<defs>
|
|
<linearGradient id="hexC" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ef4444"/><stop offset="100%" stop-color="#dc2626"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
|
|
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="url(#hexC)"/>
|
|
<circle cx="20" cy="18" r="1.5" fill="#ef4444" opacity="0.5"/>
|
|
<circle cx="12" cy="26" r="1.5" fill="#ef4444" opacity="0.35"/>
|
|
<circle cx="34" cy="12" r="1.5" fill="#ef4444" opacity="0.65"/>
|
|
<circle cx="40" cy="20" r="1.5" fill="#ef4444" opacity="0.5"/>
|
|
<circle cx="44" cy="32" r="1.5" fill="#ef4444" opacity="0.35"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
|
|
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="#000"/>
|
|
<circle cx="20" cy="18" r="1.5" fill="#000" opacity="0.5"/>
|
|
<circle cx="12" cy="26" r="1.5" fill="#000" opacity="0.35"/>
|
|
<circle cx="34" cy="12" r="1.5" fill="#000" opacity="0.65"/>
|
|
<circle cx="40" cy="20" r="1.5" fill="#000" opacity="0.5"/>
|
|
<circle cx="44" cy="32" r="1.5" fill="#000" opacity="0.35"/>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрная версия</div>
|
|
</div>
|
|
|
|
<!-- Logo 04 Wordmark variants -->
|
|
<div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
|
|
<div class="label" style="color:#22c55e">04a ★</div>
|
|
<div class="name">Hex-Wave + "Calls24" — Inter (Regular/Bold)</div>
|
|
<div class="desc">Иконка + словоформ. Шрифт Inter: тонкий "calls" (#300 weight), жирный "24" (#700). Зелёный градиент на волне. Tech-подчёркивание.</div>
|
|
<div class="logo-row" style="justify-content:center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
|
|
<defs>
|
|
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g transform="translate(2,2)">
|
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
|
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
|
</g>
|
|
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-0.5">
|
|
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
|
</text>
|
|
<line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<defs><linearGradient id="h1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/></linearGradient></defs>
|
|
<g transform="translate(2,2)">
|
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#h1)"/>
|
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
|
</g>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
|
|
<g transform="translate(2,2)">
|
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="#000"/>
|
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
|
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
|
|
<circle cx="7" cy="24" r="2" fill="#000" opacity="0.3"/>
|
|
<circle cx="15" cy="18" r="2" fill="#000" opacity="0.5"/>
|
|
<circle cx="23" cy="6" r="2" fill="#000"/>
|
|
<circle cx="31" cy="18" r="2" fill="#000" opacity="0.5"/>
|
|
<circle cx="39" cy="24" r="2" fill="#000" opacity="0.3"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной иконка • чёрная иконка</div>
|
|
</div>
|
|
|
|
<div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
|
|
<div class="label">04b</div>
|
|
<div class="name">Hex-Wave + "Calls24" — Manrope (Medium/Bold)</div>
|
|
<div class="desc">Тот же знак, другой шрифт. Manrope: более характерный, геометричный. Двойная tech-линия как акцент.</div>
|
|
<div class="logo-row" style="justify-content:center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
|
|
<defs>
|
|
<linearGradient id="hexGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g transform="translate(2,2)">
|
|
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad2)"/>
|
|
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
|
|
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
|
|
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
|
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
|
|
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
|
|
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
|
|
</g>
|
|
<text x="56" y="38" font-family="Manrope,-apple-system,sans-serif" font-weight="400" font-size="32" fill="#fff" letter-spacing="-0.3">
|
|
calls<tspan font-weight="700" fill="#22c55e">24</tspan>
|
|
</text>
|
|
<line x1="202" y1="42" x2="228" y2="42" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="202" y1="45" x2="220" y2="45" stroke="#22c55e" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">Inter vs Manrope — выбери характер</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|