<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
color: black;
background-color: white;
}
svg {
position: absolute;
top: -8px;
left: -8px;
transform: scale(0.07);
transform-origin: 0 0;
}
svg path {
stroke: #000;
stroke-width: 25px;
fill: rgba(0, 0, 0, 0);
cursor: pointer;
transition: 1s;
}
path#pathA {
stroke-dashoffset: 5803.15;
stroke-dasharray: 2901.57, 2981.57, 240;
}
path#pathA.svg {
stroke-dashoffset: 5803.15;
stroke-dasharray: 2901.57, 5258.15, 240;
}
path#pathB {
stroke-dashoffset: 800;
stroke-dasharray: 400, 480, 240;
}
path#pathB.svg {
stroke-dashoffset: 800;
stroke-dasharray: 400, 600, 0;
}
path#pathC {
stroke-dashoffset: 6993.11;
stroke-dasharray: 3496.56, 3576.56, 240;
}
path#pathC.svg {
stroke-dashoffset: 6993.11;
stroke-dasharray: 3496.56, 6448.11, 240;
}
</style>
</head>
<body id="click">
<svg width="1000px" height="1000px">
<path
id="pathA"
d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"
></path>
<path id="pathB" d="M 300 500 L 700 500"></path>
<path
id="pathC"
d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"
></path>
</svg>
<script>
var x = document.getElementById('click');
var a = document.getElementById('pathA');
var b = document.getElementById('pathB');
var c = document.getElementById('pathC');
x.onclick = function () {
a.classList.toggle('svg');
b.classList.toggle('svg');
c.classList.toggle('svg');
};
</script>
</body>
</html>