[html]
<div class="tree-container" id="tree">
<svg class="connector" id="svg"></svg>
<!-- Поколение 1 -->
<div class="tree-generation" id="gen1">
<div class="tree-person deceased" id="deorman">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Деорманн Берк</div>
</div>
<div class="tree-person deceased" id="cornelia">
<div class="tree-photo"><img src="https://forumupload.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 deceased" id="kantankerus">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Кантанкерус Нотт</div>
</div>
<div class="tree-person deceased" id="diana">
<div class="tree-photo"><img src="https://forumupload.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 deceased" id="demetrius">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Деметриус Берк</div>
</div>
<div class="tree-person" id="morana">
<div class="tree-photo"><img src="https://forumupload.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="walburga">
<div class="tree-photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRod4QRA4YqZUlVHvUI9LdcN9HmmRoEOkGNyA&s"></div>
<div class="tree-label">Вальбурга Блэк<br><span class="tree-date">1928 —</span></div>
</div>
<div class="tree-person" id="damian">
<div class="tree-photo"><img src="https://i.pinimg.com/736x/a0/1a/e1/a01ae1983fae06e3a8fbebf83404af87.jpg"></div>
<div class="tree-label">Дамиан Берк<br><span class="tree-date">1929 —</span></div>
</div>
<div class="tree-person deceased" id="elisandra">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Элисандра Берк<br><span class="tree-maiden">(урожд. Макмиллан)</span><br><span class="tree-date">1927 — 1963</span></div>
</div>
<div class="tree-person" id="darius">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Дариус Берк</div>
</div>
<div class="tree-person" id="julietta">
<div class="tree-photo"><img src="https://forumupload.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="darlin">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Дарлин Берк</div>
</div>
</div>
<!-- Поколение 4 -->
<div class="tree-generation" id="gen4">
<div class="tree-person" id="mirabelle">
<div class="tree-photo"><img src="https://image.tmdb.org/t/p/w300/3yUHEp7BIqfqMtGGSi8XZqDHr30.jpg"></div>
<div class="tree-label">Мирабелль Мильфей<br><span class="tree-maiden">(урожд. Блэк)</span><br><span class="tree-date"></span></div>
</div>
<div class="tree-person" id="regulus">
<div class="tree-photo"><img src="https://www.film.ru/sites/default/files/people/3233974-2280443.jpg"></div>
<div class="tree-label">Регулус Блэк<br><span class="tree-date">1961 —</span></div>
</div>
<div class="tree-person" id="dorian">
<div class="tree-photo"><img src="https://preview.redd.it/rate-young-tom-sturridge-id-give-him-a-100-10-genuinely-one-v0-day94tnef8rd1.jpg?width=640&crop=smart&auto=webp&s=c8afd9089665192f4ea1226b2713dc328d8bb856"></div>
<div class="tree-label">Дориан Берк<br><span class="tree-date">1953 —</span></div>
</div>
<div class="tree-person deceased" id="dorea">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Дорея Берк<br><span class="tree-date">1953 — 1966</span></div>
</div>
<div class="tree-person" id="ametil">
<div class="tree-photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlYI1vnIx78XaQdo86xTPbOzlhDUrHgOF-KA&s"></div>
<div class="tree-label">Аметил Берк<br><span class="tree-date">1951 —</span></div>
</div>
<div class="tree-person" id="dominik">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t250228.jpg"></div>
<div class="tree-label">Доминик Берк</div>
</div>
<div class="tree-person" id="dalia">
<div class="tree-photo"><img src="https://forumupload.ru/uploads/001c/64/37/7/t556725.jpg"></div>
<div class="tree-label">Далия Берк</div>
</div>
</div>
</div>
<script>
const couples = [
['deorman', 'cornelia'],
['kantankerus', 'diana'],
['demetrius', 'morana'],
['darius', 'julietta'],
['damian', 'elisandra'],
['damian', 'walburga']
];
const parentChildLinks = [
[['deorman', 'cornelia'], 'demetrius'],
[['kantankerus', 'diana'], 'morana'],
[['demetrius', 'morana'], 'damian'],
[['demetrius', 'morana'], 'darius'],
[['demetrius', 'morana'], 'darlin'],
[['damian', 'elisandra'], 'dorian'],
[['damian', 'elisandra'], 'dorea'],
[['damian', 'walburga'], 'mirabelle'],
[['damian', 'walburga'], 'regulus'],
[['darius', 'julietta'], 'ametil'],
[['darius', 'julietta'], 'dominik'],
[['darius', 'julietta'], 'dalia']
];
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]
on watch 
