430 lines
43 KiB
HTML
430 lines
43 KiB
HTML
<!DOCTYPE html>
|
||
<!-- tools/fish-preview.html — страница визуальной приёмки портретов рыб (37 видов).
|
||
Открывается напрямую через file:// — только <img> и инлайн-SVG, без fetch().
|
||
Порядок карточек = порядок SPECIES в index.html. -->
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Портреты рыб — приёмка (37)</title>
|
||
<style>
|
||
/* Тёмный фон в стиле игры (та же база, что html,body в index.html: #0d3b66) */
|
||
body{margin:0;background:#0d3b66;color:#fff;
|
||
font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
|
||
padding:24px 20px 40px}
|
||
h1{font-size:24px;margin:0 0 4px;color:#ffe9a8;text-shadow:0 1px 2px rgba(0,0,0,.4)}
|
||
h2{font-size:19px;margin:36px 0 6px;color:#ffe9a8;text-shadow:0 1px 2px rgba(0,0,0,.4)}
|
||
.sub{color:rgba(255,255,255,.65);font-size:13px;margin-bottom:16px;line-height:1.45}
|
||
/* Сетка карточек (оформление как HUD-элементы игры: тёмно-синий градиент, золотистая кайма) */
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
|
||
.card{background:linear-gradient(rgba(9,32,58,.72),rgba(6,25,45,.62));
|
||
border:1px solid rgba(255,233,168,.22);border-radius:14px;padding:10px;
|
||
display:flex;flex-direction:column;gap:8px;align-items:center;
|
||
box-shadow:0 3px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)}
|
||
.card img{width:160px;height:100px;background:rgba(255,255,255,.05);border-radius:8px}
|
||
.card .name{font-size:14px;font-weight:600;text-align:center;line-height:1.3}
|
||
/* Секция «читаемость в UI»: те же три пилота в масштабах дневника и карточки.
|
||
Размеры <img> заданы в CSS-пикселях ровно как в игре (44×28 / 40×26 / 240×150). */
|
||
.uigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
|
||
.uicard{background:linear-gradient(rgba(9,32,58,.72),rgba(6,25,45,.62));
|
||
border:1px solid rgba(255,233,168,.22);border-radius:14px;padding:10px;
|
||
display:flex;flex-direction:column;gap:8px;align-items:flex-start;
|
||
box-shadow:0 3px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)}
|
||
.uiname{font-size:14px;font-weight:600;color:#ffe9a8}
|
||
.uirow{display:flex;gap:10px;align-items:flex-end}
|
||
.uirow img{display:block;background:rgba(255,255,255,.05);border-radius:4px}
|
||
.uicardbig{display:block;width:240px;height:150px;background:rgba(255,255,255,.05);border-radius:8px}
|
||
.uitag{font-size:11px;color:rgba(255,255,255,.6);font-family:ui-monospace,Consolas,monospace}
|
||
/* Блок «Варианты»: 8 копий инлайн-SVG карася; перекраска — CSS-переменными --f1/--f3
|
||
(те же, что во всех fish-*.svg), свечение/градиент — filter на контейнере копии */
|
||
.vcard{background:linear-gradient(rgba(9,32,58,.72),rgba(6,25,45,.62));
|
||
border:1px solid rgba(255,233,168,.22);border-radius:14px;padding:10px;
|
||
display:flex;flex-direction:column;gap:8px;align-items:center;
|
||
box-shadow:0 3px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)}
|
||
.vimg{width:160px;height:100px;background:rgba(255,255,255,.05);border-radius:8px}
|
||
.vimg svg{display:block;width:160px;height:100px}
|
||
.vlabel{font-size:13px;font-weight:600;color:#ffe9a8;font-family:ui-monospace,Consolas,monospace}
|
||
/* Оверрайды вариантов (демо того, как будут выглядеть варианты в карточке улова) */
|
||
.v-normal{ /* normal — без оверрайдов */ }
|
||
.v-copper{--f1:hsl(25,55%,55%);--f3:hsl(25,50%,35%);filter:drop-shadow(0 0 12px rgba(217,154,98,.9))}
|
||
.v-silver{filter:grayscale(.85) brightness(1.25) drop-shadow(0 0 12px rgba(210,228,245,.9))}
|
||
.v-quartz{--f1:hsl(270,25%,72%);--f3:hsl(270,25%,45%);filter:drop-shadow(0 0 12px rgba(205,191,224,.9))}
|
||
.v-gold{--f1:#ffd75e;--f3:hsl(45,70%,40%);filter:drop-shadow(0 0 12px rgba(255,215,94,.9))}
|
||
.v-emerald{--f1:hsl(150,55%,42%);--f3:hsl(150,50%,28%);filter:drop-shadow(0 0 12px rgba(46,189,107,.9))}
|
||
.v-diamond{--f1:hsl(200,60%,78%);--f3:hsl(200,50%,45%);filter:drop-shadow(0 0 12px rgba(109,184,242,.95))}
|
||
.v-rainbow{animation:hue-rotate 2.4s linear infinite}
|
||
@keyframes hue-rotate{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Портреты рыб — приёмка (37)</h1>
|
||
<div class="sub">
|
||
Каждый портрет — <code>assets/fish/fish-<id>.svg</code> (viewBox 0 0 160 100),
|
||
цвета через <code>var(--f1..f4, hsl-фолбэк)</code>. Порядок — как в <code>SPECIES</code> в index.html.
|
||
</div>
|
||
<div class="grid">
|
||
<div class="card"><img src="../assets/fish/fish-carass.svg" width="160" height="100" alt="carass — Карась"><div class="name">carass — Карась</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-perch.svg" width="160" height="100" alt="perch — Окунь"><div class="name">perch — Окунь</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-bream.svg" width="160" height="100" alt="bream — Лещ"><div class="name">bream — Лещ</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-carp.svg" width="160" height="100" alt="carp — Карп"><div class="name">carp — Карп</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-pike.svg" width="160" height="100" alt="pike — Щука"><div class="name">pike — Щука</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-catfish.svg" width="160" height="100" alt="catfish — Сом"><div class="name">catfish — Сом</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-sturge.svg" width="160" height="100" alt="sturge — Осётр"><div class="name">sturge — Осётр</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-gold.svg" width="160" height="100" alt="gold — Золотая рыбка"><div class="name">gold — Золотая рыбка</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-zander.svg" width="160" height="100" alt="zander — Судак"><div class="name">zander — Судак</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-chuch.svg" width="160" height="100" alt="chuch — Хариус"><div class="name">chuch — Хариус</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-crayfish.svg" width="160" height="100" alt="crayfish — Гигантский рак"><div class="name">crayfish — Гигантский рак</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-bleak.svg" width="160" height="100" alt="bleak — Плотва"><div class="name">bleak — Плотва</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-roundel.svg" width="160" height="100" alt="roundel — Густера"><div class="name">roundel — Густера</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-eelpout.svg" width="160" height="100" alt="eelpout — Вьюн"><div class="name">eelpout — Вьюн</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-tench.svg" width="160" height="100" alt="tench — Линь"><div class="name">tench — Линь</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-navaga.svg" width="160" height="100" alt="navaga — Навага"><div class="name">navaga — Навага</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-rudd.svg" width="160" height="100" alt="rudd — Краснопёрка"><div class="name">rudd — Краснопёрка</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-cisco.svg" width="160" height="100" alt="cisco — Сиг"><div class="name">cisco — Сиг</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-herring.svg" width="160" height="100" alt="herring — Сельдь"><div class="name">herring — Сельдь</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-mackerel.svg" width="160" height="100" alt="mackerel — Скумбрия"><div class="name">mackerel — Скумбрия</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-flounder.svg" width="160" height="100" alt="flounder — Камбала"><div class="name">flounder — Камбала</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-tuna.svg" width="160" height="100" alt="tuna — Тунец"><div class="name">tuna — Тунец</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-swordfish.svg" width="160" height="100" alt="swordfish — Рыба-меч"><div class="name">swordfish — Рыба-меч</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-moray.svg" width="160" height="100" alt="moray — Гигантская мурена"><div class="name">moray — Гигантская мурена</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-grouper.svg" width="160" height="100" alt="grouper — Горбуна"><div class="name">grouper — Горбуна</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-turtle.svg" width="160" height="100" alt="turtle — Морская черепаха"><div class="name">turtle — Морская черепаха</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-angler.svg" width="160" height="100" alt="angler — Удильщик"><div class="name">angler — Удильщик</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-octopus.svg" width="160" height="100" alt="octopus — Гигантский осьминог"><div class="name">octopus — Гигантский осьминог</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-manta.svg" width="160" height="100" alt="manta — Скат-манта"><div class="name">manta — Скат-манта</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-shark.svg" width="160" height="100" alt="shark — Большая белая акула"><div class="name">shark — Большая белая акула</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-squid.svg" width="160" height="100" alt="squid — Гигантский кальмар"><div class="name">squid — Гигантский кальмар</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-whale.svg" width="160" height="100" alt="whale — Синий кит"><div class="name">whale — Синий кит</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-glowfin.svg" width="160" height="100" alt="glowfin — Светлячок"><div class="name">glowfin — Светлячок</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-moonfish.svg" width="160" height="100" alt="moonfish — Лунная рыбка"><div class="name">moonfish — Лунная рыбка</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-emberfin.svg" width="160" height="100" alt="emberfin — Изумрудный светляк"><div class="name">emberfin — Изумрудный светляк</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-violetlure.svg" width="160" height="100" alt="violetlure — Фиалковый огонёк"><div class="name">violetlure — Фиалковый огонёк</div></div>
|
||
<div class="card"><img src="../assets/fish/fish-spiritfin.svg" width="160" height="100" alt="spiritfin — Дух болота"><div class="name">spiritfin — Дух болота</div></div>
|
||
</div>
|
||
|
||
<h2>Читаемость в UI (пилотные виды)</h2>
|
||
<div class="sub">
|
||
Три редизайненных вида в реальных масштабах интерфейса: дневник <code>44×28</code> и узкий
|
||
<code>40×26</code>, карточка улова <code>240×150</code>. Проверка: читаются ли 3-4 крупных акцента
|
||
(пятно карася, «юбка» леща, крылья золотой) без увеличения.
|
||
</div>
|
||
<div class="uigrid">
|
||
<div class="uicard">
|
||
<div class="uiname">carass — Карась</div>
|
||
<div class="uirow">
|
||
<img src="../assets/fish/fish-carass.svg" width="44" height="28" alt="carass, дневник 44×28">
|
||
<img src="../assets/fish/fish-carass.svg" width="40" height="26" alt="carass, узкий 40×26">
|
||
</div>
|
||
<div class="uitag">дневник 44×28 / 40×26</div>
|
||
<img class="uicardbig" src="../assets/fish/fish-carass.svg" width="240" height="150" alt="carass, карточка 240×150">
|
||
<div class="uitag">карточка 240×150</div>
|
||
</div>
|
||
<div class="uicard">
|
||
<div class="uiname">bream — Лещ</div>
|
||
<div class="uirow">
|
||
<img src="../assets/fish/fish-bream.svg" width="44" height="28" alt="bream, дневник 44×28">
|
||
<img src="../assets/fish/fish-bream.svg" width="40" height="26" alt="bream, узкий 40×26">
|
||
</div>
|
||
<div class="uitag">дневник 44×28 / 40×26</div>
|
||
<img class="uicardbig" src="../assets/fish/fish-bream.svg" width="240" height="150" alt="bream, карточка 240×150">
|
||
<div class="uitag">карточка 240×150</div>
|
||
</div>
|
||
<div class="uicard">
|
||
<div class="uiname">gold — Золотая рыбка</div>
|
||
<div class="uirow">
|
||
<img src="../assets/fish/fish-gold.svg" width="44" height="28" alt="gold, дневник 44×28">
|
||
<img src="../assets/fish/fish-gold.svg" width="40" height="26" alt="gold, узкий 40×26">
|
||
</div>
|
||
<div class="uitag">дневник 44×28 / 40×26</div>
|
||
<img class="uicardbig" src="../assets/fish/fish-gold.svg" width="240" height="150" alt="gold, карточка 240×150">
|
||
<div class="uitag">карточка 240×150</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Варианты (демо перекраски через CSS-переменные)</h2>
|
||
<div class="sub">
|
||
Один и тот же инлайн-SVG (<code>carass</code>) в 8 копиях — оверрайды <code>--f1</code>/<code>--f3</code>
|
||
и <code>filter</code> на контейнере копии. Так же будут перекрашиваться варианты
|
||
в карточке улова (normal/copper/silver/quartz/gold/emerald/diamond/rainbow).
|
||
<br><b>Внимание:</b> блок синхронизируется ВРУЧНУЮ при правке <code>assets/fish/fish-carass.svg</code>
|
||
(fetch под file:// недоступен, поэтому SVG вставлен инлайном).
|
||
</div>
|
||
<div class="grid">
|
||
<div class="vcard"><div class="vimg v-normal"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<!-- хвост: слабая вилка, закруглённые лопасти (стебель толстый, 14 ед.) -->
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<!-- спинной плавник: ДЛИННЫЙ, кромка полого-выпуклая (пик чуть ближе к хвосту), основание глубоко утоплено в тело (нахлёст ≥4 ед., щели нет) -->
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<!-- лучи спинного плавника: 5 тонких штрихов веером от основания к кромке (передние короче, задние длиннее) -->
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<!-- анальный плавник: округлый, ШИРОКИМ основанием растёт из брюха, а не висит каплей -->
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<!-- лучи анального плавника: 3 коротких тёмных штриха на лопасти -->
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<!-- брюшные плавники: пара мягких округлых лопастей, направлены назад-вниз (без острых углов) -->
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<!-- тело: высокое и округлое, спина горбатая, голова тупая (длина/глубина ≈0.51) -->
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<!-- брюхо: светлая нижняя треть -->
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<!-- спинная кромка: тонкая тёмная полоса по верхнему контуру (не зубцы) -->
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<!-- жаберная пластина: мягкая светлая заливка (объём маленькой головы) -->
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<!-- жаберная дуга: тёмный серп у головы -->
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<!-- ГЛАВНЫЙ знак вида: тёмное пятно у самого основания хвостового плавника (не «второй глаз») -->
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<!-- чешуя: 3 широких серпа на плече (крупная чешуя, а не решётка) -->
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<!-- рот: крошечная щель на тупом рыле (усов нет — это карп!) -->
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<!-- грудной плавник: мягкая округлая лопасть на боку под жаберной дугой, направлена назад-вниз (в стиле брюшных) -->
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<!-- глаз: ободок → склера → радужка → зрачок → блик -->
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">normal</div></div>
|
||
<div class="vcard"><div class="vimg v-copper"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">copper</div></div>
|
||
<div class="vcard"><div class="vimg v-silver"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">silver</div></div>
|
||
<div class="vcard"><div class="vimg v-quartz"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">quartz</div></div>
|
||
<div class="vcard"><div class="vimg v-gold"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">gold</div></div>
|
||
<div class="vcard"><div class="vimg v-emerald"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">emerald</div></div>
|
||
<div class="vcard"><div class="vimg v-diamond"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">diamond</div></div>
|
||
<div class="vcard"><div class="vimg v-rainbow"><!-- Карась (carass) — копия assets/fish/fish-carass.svg, править вместе с источником -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100">
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M42 44 L13 33 C21 41 25 46 30 51 C25 56 21 61 13 69 L42 58 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M62 37 C64 23 72 13 84 12 C98 11 114 20 126 34 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M68 36.7 C67.6 31.8 67.8 26.5 68 21.5"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M79 36.2 C78.7 29.5 78.9 20.5 79 13.6"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M90 35.7 C89.8 28 89.8 19.5 89.8 12.8"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M101 35.2 C101.2 28.5 101.1 21.5 101 15.9"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="0.9" opacity="0.3" d="M112 34.7 C112.3 30 112.1 25.5 112 21.9"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M54 62 C59 81 65 89 72 89 C79 88 84 81 88 69 L54 62 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M63 72 C63.6 77 64.4 80.5 65 83"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M70 75 C70.6 80 71.4 84 72.5 87"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1" opacity="0.3" d="M78 76 C78.5 79 79 81.5 79.3 83.5"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M109 73 C103 85 92 82 100 71 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M118 73 C113 85 104 82 109 72 Z"/>
|
||
<path fill="var(--f1,hsl(48,45%,48%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 L42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C145 53 147 51 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" d="M42 58 C53 71 76 79 100 79 C120 79 137 70 142 57 C136 66 118 72 100 72 C78 72 56 66 42 58 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M148 50 C144 41 138 34 126 30 C116 26 106 24 96 24 C74 25 53 33 42 44 C54 37 76 30 96 27.5 C108 28 118 33 127 37.5 C136 42 143 47 148 50 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.35" d="M132 39 C138 46 139 54 134 62 C129 54 127 46 127 40 Z"/>
|
||
<path fill="none" stroke="var(--f4,hsl(50,35%,22%))" stroke-width="1.5" d="M132 39 C138 46 139 54 134 62"/>
|
||
<ellipse fill="#2b2416" cx="44.5" cy="50" rx="3.2" ry="4"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M104 41 Q97 50 104 59 Q101 50 104 41 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M114 40 Q106 50 114 60 Q111 50 114 40 Z"/>
|
||
<path fill="var(--f2,hsl(48,32%,72%))" opacity="0.3" d="M124 43 Q117 50 124 57 Q121 50 124 43 Z"/>
|
||
<path fill="var(--f4,hsl(50,35%,22%))" d="M143 49 C146 49.4 148 50.2 148.8 51.4 C147 52.6 145 52 143.4 50.6 Z"/>
|
||
<path fill="var(--f3,hsl(46,42%,33%))" d="M133 54 C126 57 116 61 118 66 C120 71 128 64 132 58 Z"/>
|
||
<circle fill="var(--f4,hsl(50,35%,22%))" cx="137.5" cy="41.5" r="5.7"/>
|
||
<circle fill="#f7f3e6" cx="137.5" cy="41.5" r="4.6"/>
|
||
<circle fill="#c98a2a" cx="137.5" cy="41.5" r="3.2"/>
|
||
<circle fill="#142638" cx="137.5" cy="41.5" r="2.3"/>
|
||
<circle fill="#fff" cx="136" cy="40" r="0.9"/>
|
||
</svg></div><div class="vlabel">rainbow</div></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|