Animating an svg of circles and lines connecting them when hovering over a circle

Question

I am trying to animate an svg of circles that are connected with lines, and when I hover over a circle I want it to get bigger and the lines connected to it to move accordingly to give a kind of a ripple effect

I don't have a lot of experience with svg animation and I don't know how to do this animation

This is the code of the svg

 <svg id="bfb968cf-9c10-4b95-976d-39572f14cca2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"> <defs> <style>.b86d321e-e933-41e7-b9de-d8906ab9f495, .ef4e3f04-0106-47f8-8a64-7bb7dd93b258, .f80b12b3-a424-4691-a5c5-992c4f51bc1f { font-size: 24px; fill: #5c544d; font-family: Hexa-Regular, Hexa; }.ef4e3f04-0106-47f8-8a64-7bb7dd93b258 { letter-spacing: 0.02em; }.f2cd310d-b27c-4166-b6f2-b74eb0cdf1bd { letter-spacing: 0em; }.bdbcd047-f773-490f-86ef-0d798867384b { letter-spacing: 0em; }.a19a26da-c5ac-4b94-a7d4-3221e60d5b51, .f80b12b3-a424-4691-a5c5-992c4f51bc1f { letter-spacing: 0.06em; }.bf0941cb-c007-4f16-9a27-ac559d28bfc0 { letter-spacing: 0.02em; }.b86d321e-e933-41e7-b9de-d8906ab9f495 { letter-spacing: 0.06em; }.b9de3256-70f2-4f00-8b48-12b6f4390d90 { letter-spacing: -0.03em; }.f4b96596-c939-4864-967e-2d34a78c69ab { letter-spacing: 0em; }.b9584f6a-da5e-4638-8b98-4dac45f69f56 { letter-spacing: 0.02em; }.e40c86bd-0e22-4607-89ad-a265a6cc9925 { letter-spacing: 0.02em; }.b63043ff-c18f-4363-b573-f0361ffdc8e6 { letter-spacing: 0.04em; }.b811864c-bf80-449e-ba8d-70fe601827aa { fill: none; stroke: #e28300; stroke-miterlimit: 10; stroke-width: 2px; }.b9690ebb-88ed-4f4a-97b0-e6f302cd6775 { fill: #e28300; }.b0499ca3-0d59-4e49-a54b-b88cc4714521 { fill: #f9b873; }.acc390ca-5860-4b56-9b05-19b3d11cd9c2 { fill: #f39f40; }.big-circle:hover { fill: #d63628; r: 35px; transition: 500ms all ease-out; } </style> </defs><text class="ef4e3f04-0106-47f8-8a64-7bb7dd93b258" transform="translate(701.1 392.76)">D <tspan class="f2cd310d-b27c-4166-b6f2-b74eb0cdf1bd" x="13.46" y="0">A</tspan> <tspan class="bdbcd047-f773-490f-86ef-0d798867384b" x="25.66" y="0">T</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51" x="36.34" y="0">A</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51"> <tspan x="-45.46" y="30.95">ENGINEERING</tspan> </tspan> </text><text class="f80b12b3-a424-4691-a5c5-992c4f51bc1f" transform="translate(560.12 624.41)">M <tspan class="bf0941cb-c007-4f16-9a27-ac559d28bfc0" x="17.23" y="0">A</tspan> <tspan x="30.07" y="0">CHINE</tspan> <tspan x="-4.82" y="30.95">LEARNING</tspan> </text><text class="f80b12b3-a424-4691-a5c5-992c4f51bc1f" transform="translate(876.99 615.02)">DEEP <tspan x="-24.6" y="30.95">LEARNING</tspan></text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1004.44 358.63)">COMPUTER <tspan x="22.54" y="30.95">VISION</tspan></text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1324.95 304.56)">TIME-SERIES <tspan x="16.35" y="30.95">ANA</tspan> <tspan class="b9de3256-70f2-4f00-8b48-12b6f4390d90" x="58.6" y="30.95">L</tspan> <tspan x="67.45" y="30.95">YSIS</tspan> </text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1354.79 617.16)">N <tspan class="f4b96596-c939-4864-967e-2d34a78c69ab" x="14.79" y="0">A</tspan> <tspan x="26.99" y="0">TURAL</tspan> <tspan x="-8.61" y="30.95">LANG</tspan> <tspan class="b9584f6a-da5e-4638-8b98-4dac45f69f56" x="46.15" y="30.95">U</tspan> <tspan class="e40c86bd-0e22-4607-89ad-a265a6cc9925" x="59.52" y="30.95">A</tspan> <tspan x="72.22" y="30.95">GE</tspan> <tspan x="-20.41" y="61.91">P</tspan> <tspan class="b63043ff-c18f-4363-b573-f0361ffdc8e6" x="-7.31" y="61.91">R</tspan> <tspan x="6.17" y="61.91">OCESSING</tspan> </text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1147.4 534.57)">REINFORCEMENT<tspan x="35.87" y="30.95">LEARNING</tspan> </text><text class="ef4e3f04-0106-47f8-8a64-7bb7dd93b258" transform="translate(416.52 389.37)">D <tspan class="f2cd310d-b27c-4166-b6f2-b74eb0cdf1bd" x="13.46" y="0">A</tspan> <tspan class="bdbcd047-f773-490f-86ef-0d798867384b" x="25.66" y="0">T</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51" x="36.34" y="0">A</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51"> <tspan x="-19.98" y="30.95">SCIENCE</tspan> </tspan> </text> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="439.81" cy="470.95" r="17.91" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="1060.03" cy="441.14" r="17.91" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1158.3" y1="675.22" x2="1201.86" y2="705.03" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="1395.61 740.57 1421.22 702.66 1455.22 758.91 1395.61 740.57 1346.31 752.03 1201.86 705.03" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1693.68" y1="479.19" x2="1455.22" y2="758.91" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1421.67" cy="703.74" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1455.8" cy="758.38" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1346.89" cy="751.5" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1201.29" cy="705.64" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1157.73" cy="675.83" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1248.29" cy="657.49" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1132.51" cy="618.51" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1284.98" cy="574.95" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="980.03" cy="649.47" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="946.78" cy="728.57" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="826.41" cy="772.13" r="3.51" /> <polygon class="b811864c-bf80-449e-ba8d-70fe601827aa" points="582.79 708.47 441.78 519.31 440.64 468.87 724.51 469.38 885.45 705.03 804.05 679.81 646.99 777.26 582.79 708.47" /> <path class="b811864c-bf80-449e-ba8d-70fe601827aa" d="M613.75,482.63l63,26.36L725,468.87l89.42-21.78L1131.93,617.9l81.4,8-154.77,14.9L979.46,650l-96.3,34.4-55,87.12L947.36,728l-61.91-27.51-302.66,8L708.9,682.1l-36.69-29.8s-134.13,102-141,103.17" /> <path class="b811864c-bf80-449e-ba8d-70fe601827aa" d="M676.8,509,672.21,652.3,790.3,515.87,980.6,491.8l29.81,24.07L980.6,491.8l142.16-104.33,243,50.44L1379.56,384l-60.76,3.44L1094.1,478l-83.69-48.15-220.11,86L723.8,462l-110,20.64L506,443.65l-65.34,25.22L514,502.11l-25.22,209.8L346.63,521.6,195.3,538.8l245.34-69.93s-90.57,48.15-94,52.73" /> <path class="b811864c-bf80-449e-ba8d-70fe601827aa" d="M1696.22,477.66l214-75-451.56-37-69.93,19.49L1422,436.77,1285.55,574.34l-72.22,51.59-55,49.29L947.36,728,1201.86,705l45.86-48.15,37.83-82.54s401.25-97.45,408.13-95.15-305-94-305-94l-324.06,54.37,148.66,186.38L885.45,700.45" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="195.3 538.8 582.79 708.47 440.64 468.87" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="708.9" y1="682.1" x2="804.05" y2="679.81" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1010.41" y1="515.87" x2="1109" y2="471.16" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="1213.33 625.93 1395.61 740.57 1693.68 479.19 1421.98 436.77" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="804.63" cy="680.42" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="647.57" cy="776.72" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="708.33" cy="681.57" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="672.79" cy="652.91" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="488.21" cy="712.52" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="531.21" cy="755.52" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="194.73" cy="539.41" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="346.06" cy="522.21" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="442.36" cy="518.77" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="514.58" cy="502.72" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="506.56" cy="444.26" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="614.32" cy="482.09" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="677.37" cy="509.6" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="789.72" cy="516.48" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="813.8" cy="447.7" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1009.84" cy="429.35" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="980.03" cy="492.41" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1009.84" cy="515.33" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1122.19" cy="388.08" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1094.67" cy="477.5" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1318.23" cy="389.23" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1365.23" cy="438.52" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1422.55" cy="437.38" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1459.24" cy="366.3" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1693.11" cy="478.65" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="1395.93" cy="740.36" r="17.91" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="726.42" cy="473.24" r="17.91" /> <circle class="b0499ca3-0d59-4e49-a54b-b88cc4714521 big-circle" cx="1386.76" cy="384.97" r="17.91" /> <circle class="acc390ca-5860-4b56-9b05-19b3d11cd9c2 big-circle" cx="589.99" cy="705.97" r="17.91" /> <circle class="acc390ca-5860-4b56-9b05-19b3d11cd9c2 big-circle" cx="1212.5" cy="621.13" r="17.91" /> <circle class="b0499ca3-0d59-4e49-a54b-b88cc4714521 big-circle" cx="882.33" cy="696.8" r="17.91" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="531.22" y1="755.66" x2="488.22" y2="712.66" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="647.22" y1="776.66" x2="828.22" y2="771.66" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="-13.78 498.66 195.22 539.66 -11.32 631.72" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1421.22" y1="703.66" x2="1248.22" y2="656.66" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1693.22" y1="478.66" x2="1911.76" y2="442.84" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="-12.51" y1="560.72" x2="195.22" y2="539.66" /> </svg>

And this is how it looks:

Answer 1

I'm not sure whether you can achieve this using svg only. But you can use canvas to get your desired animation.

There are some libraries like particle.js which you can get similar results.

https://vincentgarreau.com/particles.js/

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

Answer 2

You cannot "ripple" connected lines when you put your mouse over a circle since you have no implied relations of those lines to your circle. And of course not easily done using SVG only.

If you would group all circles and their connected lines in the groups (SVG G element), that would be one way. With javascript you would find a circle's parent group ID and then spawn an animation of all lines in that group. That would probably mean that you would have redundancy eg lines put in the file duplicated (from and to all circles) and thus would need to find and animate them too.

Probably better way would be to have IDs of circles like "circle-1" and all lines connected to it have a style of "c1". The 2nd circle would have an ID of "circle-2" and lines connected to it a style of "c2" (lines might have several styles attached like class="c1 c4 c5").

Then you would find all lines connected to a circle with parsing its ID attribute, get a number, and select all lines with the same number after the "c" character. And spawn an animation effect for them.

So, this might probably work with SCRIPT section in the same SVG if web browsers support that but would definitely work in the web page where your SVG is displayed.

The best solution might be more data oriented, converting your.network to D3.js chart where you would find lines (eg links) easier using built-in hierarchy. I'm not sure you can easily do that since your chart is not closed.