Hybrid Publishing hybrid publication of the project Volitional Volutions of the Volatile Waters
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

84 lines
1.8 KiB

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
svg{ width:100%; height:100%; }
path{
fill: transparent;
stroke: #000;
stroke-dasharray:6px;
}
div{
position:absolute;
top:20px;
left:0;
right:0;
margin:auto;
height:500px;
width:700px;
}
p{ position:absolute; padding:30px; top:200px; width:0; height:0; border-radius:50%; }
.c1{ padding:20px; top:220px; left:10%; background:red; }
.c2{ left:50%; background:blue; }
.c3{ left:30%; background: yellow;}
</style>
</head>
<body>
<div>
<svg>
<path class='p1'></path>
<path class='p2'></path>
</svg>
<p class='c1'>bha</b>
<p class='c2'>etc</b>
<p class='c3'>hello</p>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script type="text/javascript">
var path1 = document.querySelector(".p1"),
path2 = document.querySelector(".p2");
var c1 = document.querySelector(".c1"),
c1Pos = getPointPos(c1),
c2 = document.querySelector(".c2"),
c2Pos = getPointPos(c2),
c3 = document.querySelector(".c3"),
c3Pos = getPointPos(c3);
function getPointPos(point){
var pos = $(point).position();
pos.left += point.clientWidth/2;
return pos;
}
path1.setAttribute('d', createLine([c1Pos.left, c1Pos.top], [c2Pos.left, c2Pos.top]));
path2.setAttribute('d', createLine([c3Pos.left, c3Pos.top], [c2Pos.left, c2Pos.top]));
function createLine(source, target){
var dx = target[0] - source[0],
dy = target[1] - source[1],
dr = Math.sqrt(dx * dx + dy * dy)/1.5;
return "M" +
source[0] + "," +
source[1] + "A" +
dr + "," + dr + " 0 0,1 " +
target[0] + "," +
target[1];
}
</script>
</body>
</html>