[html]
<div class="tree-container" id="tree">
<svg class="connector" id="svg"></svg>
<!-- Поколение 1 -->
<div class="tree-generation" id="gen1">
<div class="tree-person" id="elmar">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Элмар Лестрейндж</div>
</div>
<div class="tree-person" id="janin">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Джанин Лестрейндж<br><span class="tree-maiden">(урожд. Берк)</span></div>
</div>
<div class="tree-person" id="kenwald">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Кенвальд Кэрроу</div>
</div>
<div class="tree-person" id="dealla">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Деалла Кэрроу<br><span class="tree-maiden">(урожд. Эйвери)</span></div>
</div>
</div>
<!-- Поколение 2 -->
<div class="tree-generation" id="gen2">
<div class="tree-person" id="margo">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Маргарет Лестрейндж </div>
</div>
<div class="tree-person" id="reigar">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Рейгар Лестрейндж </div>
</div>
<div class="tree-person deceased" id="beanna">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Беанна Лестрейндж<br><span class="tree-maiden">(урожд. Кэрроу)</span></div>
</div>
<div class="tree-person" id="oleiv">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Олейв Лестрейндж<br><span class="tree-maiden">(урожд. Роули)</span></div>
</div>
<div class="tree-person" id="lucian">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Луциан Лестрейндж </div>
</div>
<div class="tree-person" id="jessamine">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Джессамина Лестрейндж<br><span class="tree-maiden">(урожд. Бранте)</span></div>
</div>
</div>
<!-- Поколение 3 -->
<div class="tree-generation" id="gen3">
<div class="tree-person" id="rodolphus">
<div class="tree-photo"><img src="https://hips.hearstapps.com/elleit.h-cdn.co/assets/15/37/480x480/480x480-f25b59ac10dshowbiz-matthew-mcconaughey-matthew-mcconaughey-14064328-1-ita-it-matthew-mcconaughey-jpg.jpg?resize=640:*"></div>
<div class="tree-label">Рудольфус Лестрейндж<br><span class="tree-date">1949 —</span></div>
</div>
<div class="tree-person" id="bellatrix">
<div class="tree-photo"><img src="https://sun9-10.userapi.com/impg/c858416/v858416858/1a3af2/y3tdbjQdLHc.jpg?size=604x596&quality=96&sign=52a7026e3fa474961a1961301890f3c3&type=album"></div>
<div class="tree-label">Беллатрикс Лестрейндж<br><span class="tree-maiden">(урожд. Блэк)</span><br><span class="tree-date">1949 —</span></div>
</div>
<div class="tree-person" id="rabastan">
<div class="tree-photo"><img src="https://i.pinimg.com/736x/47/7a/e0/477ae0764bce139f610005c2ee7e4010.jpg"></div>
<div class="tree-label">Рабастан Лестрейндж<br><span class="tree-date">1953 —</span></div>
</div>
<div class="tree-person" id="zacharias">
<div class="tree-photo"><img src="https://www.kino-teatr.ru/acter/album/394878/786450.jpg"></div>
<div class="tree-label">Закариас Нотт<br><span class="tree-date">1947 —</span></div>
</div>
<div class="tree-person" id="evelyn">
<div class="tree-photo"><img src="https://mn2s.com/wp-content/uploads/2021/02/Samara-Weaving.png"></div>
<div class="tree-label">Эвелин Нотт<br><span class="tree-maiden">(урожд. Лестрейндж)</span><br><span class="tree-date">1952 —</span></div>
</div>
<div class="tree-person" id="gwendolyn">
<div class="tree-photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd7QQmErYSgyMVDEU06oX-NIlzcNdgogcuRA&s"></div>
<div class="tree-label">Гвендолин Лестрейндж<br><span class="tree-date">1952 —</span></div>
</div>
<div class="tree-person" id="dammara">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Даммара Лестрейндж<br><span class="tree-date">1958 —</span></div>
</div>
</div>
<!-- Поколение 4 -->
<div class="tree-generation" id="gen4">
<div class="tree-person" id="corvus">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Корвус Лестрейндж</div>
</div>
<div class="tree-person" id="theodore">
<div class="tree-photo"><img src="https://upforme.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Теодор Нотт<br><span class="tree-date">1978 —</span></div>
</div>
</div>
<script>
const couples = [
['rowle1', 'rowle2'],
['elmar', 'janin'],
['kenwald', 'dealla'],
['reigar', 'beanna'],
['reigar', 'oleiv'],
['lucian', 'jessamine'],
['rodolphus', 'bellatrix'],
['evelyn', 'zacharias']
];
const parentChildLinks = [
[['kenwald', 'dealla'], 'beanna'],
[['elmar', 'janin'], 'margo'],
[['elmar', 'janin'], 'reigar'],
[['elmar', 'janin'], 'lucian'],
[['reigar', 'beanna'], 'rabastan'],
[['reigar', 'beanna'], 'rodolphus'],
[['lucian', 'jessamine'], 'evelyn'],
[['lucian', 'jessamine'], 'gwendolyn'],
[['lucian', 'jessamine'], 'dammara'],
[['rodolphus', 'bellatrix'], 'corvus'],
[['evelyn', 'zacharias'], 'theodore']
];
function getCenter(el) {
const rect = el.getBoundingClientRect();
return {
x: rect.left + rect.width / 2 + window.scrollX,
y: rect.top + rect.height / 2 + window.scrollY
};
}
function drawLine(x1, y1, x2, y2) {
const line = document.createElementNS("http://www.w3.org/2000/svg", 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', '#d4af37');
line.setAttribute('stroke-width', '1');
return line;
}
function drawConnections() {
const svg = document.getElementById('svg');
svg.innerHTML = '';
// Couples
for (const [id1, id2] of couples) {
const el1 = document.getElementById(id1);
const el2 = document.getElementById(id2);
if (!el1 || !el2) continue;
const p1 = getCenter(el1);
const p2 = getCenter(el2);
svg.appendChild(drawLine(p1.x, p1.y, p2.x, p2.y));
}
// Parent to child
for (const [[pid1, pid2], cid] of parentChildLinks) {
const p1 = document.getElementById(pid1);
const p2 = document.getElementById(pid2);
const c = document.getElementById(cid);
if (!p1 || !p2 || !c) continue;
const center1 = getCenter(p1);
const center2 = getCenter(p2);
const parentsMidX = (center1.x + center2.x) / 2;
const parentsBottomY = Math.max(center1.y, center2.y);
const childTop = getCenter(c).y - 40;
// vertical line down from parents to midpoint
svg.appendChild(drawLine(parentsMidX, parentsBottomY, parentsMidX, childTop));
// line to child
const childX = getCenter(c).x;
svg.appendChild(drawLine(parentsMidX, childTop, childX, childTop));
svg.appendChild(drawLine(childX, childTop, childX, getCenter(c).y));
}
}
window.addEventListener('load', drawConnections);
window.addEventListener('resize', drawConnections);
</script>
[/html]