How to implement this functionality using SVG?

Good day! Tell me, please, how do you realize it is the appearance and disappearance of the blue items in the chart as SVG on the video? Please push for a solution that css properties through which is possible to do so. While I have no ideas..

SVG itself
<svg width="926" height="707" viewBox="0 0 707 926" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path id="path1" data-image="assets/image/kadastr.svg" d="M493.309 124.08C533.036 125.253 571.761 136.898 605.618 157.853C639.474 178.808 667.275 208.339 686.245 243.495L676.265 248.953C658.244 215.554 631.832 187.5 599.669 167.593C567.506 147.685 530.716 136.622 492.976 135.508L493.309 124.08 Z" fill="#00A0E0"/>
 <path id="path2" d="M695.432 246.078C715.887 282.203 726.394 323.106 725.883 364.617C725.372 406.128 713.86 446.761 692.522 482.371L672.389 470.307C691.593 438.257 701.953 401.688 702.413 364.328C702.873 326.969 693.417 290.155 675.007 257.643L695.246.078 432 Z" fill="#00A0E0"/>
 <path id="path3" d="M694.867 492.146C672.996 528.547 641.858 558.493 604.632 578.929C567.406 599.364 525.424 609.557 482.972 608.468L483.896 572.477C519.98 573.403 555.665 564.739 587.307 547.369C618.949 529.999 645.416 504.544 664.007 473.603L694.867 492.146 Z" fill="#00A0E0"/>
 <path id="path4" d="M475.197 615.122C431.597 613.714 389.174 600.634 352.351 577.245C315.529 553.857 285.656 521.018 265.848 482.152L309.292 460.011C325.138 491.103 349.036 517.375 378.494 536.086C407.952 554.796 441.891 565.26 476.771 566.387L475.197 615.122 Z" fill="#00A0E0"/>
 <path id="path5" d="M257.272 479.66C236.778 439.928 227.319 395.425 229.882 350.792C232.446 306.16 246.938 263.033 271.846 225.908L323.717 260.711C305.036 288.554 294.167 320.9 292.245 354.374C290.322 387.849 297.416 421.226 312.787 451.025L257.272 479.66 Z" fill="#00A0E0"/>
 <path id="path6" d="M269.069 214.303C292.571 178.149 324.854 148.541 362.9 128.244C400.947 107.947 443.518 97.6234 486.636 98.2378L485.545 174.778C455.362 174.348 425.563 181.574 398.93 195.782C372.298 209.99 349.7 230.716 333.248 256.024L269.069 214.303 Z" fill="#00A0E0"/>
 <line y1="-2.5" x2="97.3499" y2="-2.5" transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 240 134)" stroke="#E7E7E7" stroke-width="5"/>
 <line y1="-2.5" x2="94" y2="-2.5" transform="matrix(-1 0 0 1 162 81)" stroke="#E7E7E7" stroke-width="5"/>
 <circle r="10" transform="matrix(-1 0 0 1 64 78)" fill="#E7E7E7"/>
 <circle r="5" transform="matrix(-1 0 0 1 64 78)" fill="white"/>
 <line x1="158" y1="373.5" x2="8" y2="373.5" stroke="#E7E7E7" stroke-width="5"/>
 <circle cx="10" cy="374" r="10" transform="rotate(-180 374 10)" fill="#E7E7E7"/>
 <circle cx="10" cy="374" r="5" transform="rotate(-180 374 10)" fill="white"/>
 <line x1="237.387" y1="610.08" x2="156.387" y2="664.08" stroke="#E7E7E7" stroke-width="5"/>
 <line x1="158" y1="663.5" x2="64" y2="663.5" stroke="#E7E7E7" stroke-width="5"/>
 <circle cx="60" cy="664" r="10" transform="rotate(-180 60 664)" fill="#E7E7E7"/>
 <circle cx="60" cy="664" r="5" transform="rotate(-180 60 664)" fill="white"/>
 <line y1="-2.5" x2="97.3499" y2="-2.5" transform="matrix(0.5547 0.5547 0.83205 -0.83205 690 608)" stroke="#E7E7E7" stroke-width="5"/>
 <line y1="-2.5" x2="94" y2="-2.5" transform="matrix(1 0 0 -1 768 661)" stroke="#E7E7E7" stroke-width="5"/>
 <circle r="10" transform="matrix(1 0 0 -1 866 664)" fill="#E7E7E7"/>
 <circle r="5" transform="matrix(1 0 0 -1 866 664)" fill="white"/>
 <line id="line3" y1="-2.5" x2="150" y2="-2.5" transform="matrix(1 0 0 -1 768 371)" stroke="#E7E7E7" stroke-width="5"/>
 <circle r="10" transform="matrix(1 0 0 -1 916 374)" fill="#E7E7E7"/>
 <circle r="5" transform="matrix(1 0 0 -1 916 374)" fill="white"/>
 <line x1="688.613" y1="131.92" x2="769.613" y2="77.9199" stroke="#E7E7E7" stroke-width="5"/>
 <line x1="768" y1="78.5" x2="862" y2="78.5" stroke="#E7E7E7" stroke-width="5"/>
 <path d="M876 78C876 83.5228 871.523 88 866 88C860.477 856 856 88 83.5228 78C856 72.4772 860.477 68 866 68C871.523 876 876 68 72.4772 78Z" fill="#E7E7E7"/>
 <circle cx="866" cy="78" r="5" fill="white"/> 
</svg>
March 19th 20 at 08:27
2 answers
March 19th 20 at 08:29
Solution
Read how to do handwriting to text in SVG https://css-tricks.com/animate-calligraphy-with-svg/
yeah. Thank you very much! - Mike24 commented on March 19th 20 at 08:32
March 19th 20 at 08:31
I would diagram did stroke, no fill - then you can safely apply the manipulation stroke-dashoffset, directly acting on these segments.
In the example I gave them a common class, and a separate id, in case the need of manipulation with specific segment on click or hover some links. Here is the link hover class .line6-link acts through the selector to the + on the next segment aydishnik line6 is just a sample, as can be seen, the link is embedded in the svg. If in a real project the links are rendered from the svg, it to work it just won't work, you will have likely to use js.

Find more questions by tags SVGHTMLJavaScriptCSS