function levelOneGF(){document.body.innerHTML='<svg id="Layer_1" height="400" width="700" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 400"><defs><style>.cls-1,.cls-11,.cls-12,.cls-2,.cls-3,.cls-5,.cls-6,.cls-7{fill:#fff;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-2,.cls-20,.cls-21,.cls-22,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke:#000;stroke-miterlimit:10;}.cls-2,.cls-4{stroke-width:0.5px;}.cls-3{stroke-width:0.53px;}.cls-10,.cls-13,.cls-20,.cls-22,.cls-4,.cls-8,.cls-9{fill:none;}.cls-21,.cls-22,.cls-5{stroke-width:0.75px;}.cls-6{stroke-width:0.92px;}.cls-7,.cls-8{stroke-width:0.94px;}.cls-9{stroke-width:0.58px;}.cls-11{stroke-width:0.17px;}.cls-12{stroke-width:0.55px;}.cls-13,.cls-14{stroke-width:0.35px;}.cls-14{opacity:0.28;}.cls-15,.cls-16{fill:blue;}.cls-16{stroke-width:0.88px;}.cls-17,.cls-18{fill:#ed1e79;}.cls-17{stroke-width:0.84px;}.cls-18{stroke-width:0.74px;}.cls-19{font-size:24px;font-family:Webdings;}.cls-20{stroke-width:0.35px;}.cls-21{opacity:0.33;}</style></defs><path class="cls-1" d="M104,4.39l201.5,295.34s5,7.3,13,9.75c1.9,12.14,6.88,19.43,15.13,13.89-8.25,5.54-5.34,9.81,5.89,11C334.11,341.7,337,346,337,346l35.67,52.29"/><line class="cls-1" x1="362.88" y1="1.93" x2="623" y2="392.73"/><line class="cls-1" x1="2.75" y1="97.64" x2="694.78" y2="98.25"/><line class="cls-1" x1="0.91" y1="289.05" x2="692.94" y2="284.14"/><line class="cls-2" x1="297.23" y1="283.53" x2="427.91" y2="102.55"/><line class="cls-2" x1="292.94" y1="278.01" x2="424.23" y2="97.02"/><line class="cls-2" x1="288.64" y1="271.26" x2="419.93" y2="92.12"/><line class="cls-2" x1="284.35" y1="266.35" x2="415.64" y2="84.14"/><line class="cls-2" x1="280.67" y1="260.21" x2="411.34" y2="76.17"/><line class="cls-2" x1="276.37" y1="252.85" x2="406.44" y2="69.42"/><line class="cls-2" x1="270.24" y1="244.88" x2="402.75" y2="62.06"/><line class="cls-2" x1="264.72" y1="237.52" x2="397.23" y2="54.69"/><line class="cls-2" x1="257.97" y1="228.31" x2="392.33" y2="46.72"/><line class="cls-2" x1="253.06" y1="221.56" x2="386.8" y2="39.97"/><line class="cls-2" x1="249.38" y1="214.2" x2="381.28" y2="30.77"/><line class="cls-2" x1="244.47" y1="206.84" x2="376.37" y2="23.4"/><line class="cls-2" x1="240.18" y1="200.71" x2="370.24" y2="17.27"/><line class="cls-2" x1="235.88" y1="196.41" x2="366.56" y2="12.98"/><line class="cls-2" x1="231.59" y1="188.44" x2="361.65" y2="5"/><line class="cls-2" x1="228.52" y1="181.07" x2="361.04" y2="-9.11"/><line class="cls-2" x1="224.23" y1="174.94" x2="354.9" y2="-15.25"/><line class="cls-2" x1="219.32" y1="167.58" x2="344.47" y2="-11.56"/><line class="cls-2" x1="212.04" y1="163.48" x2="343.25" y2="-19.95"/><line class="cls-2" x1="208.25" y1="156.17" x2="337.6" y2="-29.08"/><line class="cls-2" x1="203.24" y1="148.88" x2="332.59" y2="-36.37"/><line class="cls-2" x1="198.87" y1="142.81" x2="326.37" y2="-42.42"/><line class="cls-2" x1="194.51" y1="138.57" x2="322.63" y2="-46.66"/><line class="cls-2" x1="190.11" y1="130.66" x2="317.61" y2="-54.57"/><line class="cls-2" x1="186.94" y1="123.34" x2="316.8" y2="-68.67"/><line class="cls-2" x1="182.56" y1="117.26" x2="310.58" y2="-74.72"/><line class="cls-2" x1="177.55" y1="109.97" x2="300.2" y2="-70.89"/><line class="cls-2" x1="174.34" y1="107.23" x2="305.54" y2="-76.21"/><line class="cls-2" x1="170.55" y1="99.92" x2="299.89" y2="-85.33"/><line class="cls-2" x1="165.54" y1="92.62" x2="294.88" y2="-92.63"/><line class="cls-2" x1="161.16" y1="86.55" x2="288.67" y2="-98.68"/><line class="cls-2" x1="156.81" y1="82.31" x2="284.92" y2="-102.92"/><line class="cls-2" x1="152.41" y1="74.4" x2="279.91" y2="-110.83"/><line class="cls-2" x1="149.24" y1="67.08" x2="279.1" y2="-124.93"/><line class="cls-2" x1="144.86" y1="61.01" x2="272.88" y2="-130.98"/><line class="cls-2" x1="139.85" y1="53.71" x2="262.5" y2="-127.15"/><line class="cls-2" x1="346.31" y1="356.53" x2="587.42" y2="339.97"/><line class="cls-2" x1="364.1" y1="288.44" x2="399.07" y2="350.4"/><line class="cls-2" x1="419.32" y1="285.98" x2="451.83" y2="346.1"/><line class="cls-2" x1="476.37" y1="287.21" x2="504.6" y2="343.04"/><line class="cls-2" x1="519.93" y1="285.98" x2="549.38" y2="341.81"/><path class="cls-3" d="M83.09,286.73c-2.79-.39-2.07,3-2.07,9.29V400.31c0,6.31-4.56,11.47-10.13,11.47h0c-5.56,0-10.12-5.16-10.12-11.47V296c0-6.31,4.56-11.47,10.12-11.47"/><line class="cls-4" x1="61.09" y1="294.57" x2="80.22" y2="294.65"/><line class="cls-4" x1="61.17" y1="299.78" x2="80.13" y2="299.7"/><line class="cls-4" x1="60.74" y1="303.61" x2="80.48" y2="303.7"/><line class="cls-4" x1="60.91" y1="307.17" x2="80.57" y2="307.26"/><line class="cls-4" x1="61.3" y1="310.65" x2="80.26" y2="310.57"/><line class="cls-4" x1="60.87" y1="314.48" x2="80.61" y2="314.57"/><line class="cls-4" x1="61.04" y1="318.04" x2="80.7" y2="318.13"/><line class="cls-4" x1="61.33" y1="322.09" x2="80.28" y2="322"/><line class="cls-4" x1="60.89" y1="325.91" x2="80.63" y2="326"/><line class="cls-4" x1="61.07" y1="329.48" x2="80.72" y2="329.57"/><line class="cls-4" x1="61.46" y1="332.96" x2="80.41" y2="332.87"/><line class="cls-4" x1="61.02" y1="336.78" x2="80.76" y2="336.87"/><line class="cls-4" x1="61.2" y1="340.35" x2="80.85" y2="340.43"/><line class="cls-4" x1="61.25" y1="344.33" x2="80.21" y2="344.24"/><line class="cls-4" x1="60.82" y1="348.15" x2="80.55" y2="348.24"/><line class="cls-4" x1="60.99" y1="351.72" x2="80.64" y2="351.8"/><line class="cls-4" x1="61.38" y1="355.2" x2="80.34" y2="355.11"/><line class="cls-4" x1="60.95" y1="359.02" x2="80.68" y2="359.11"/><line class="cls-4" x1="61.12" y1="362.59" x2="80.77" y2="362.67"/><line class="cls-4" x1="61.4" y1="366.63" x2="80.36" y2="366.54"/><line class="cls-4" x1="60.97" y1="370.46" x2="80.71" y2="370.54"/><line class="cls-4" x1="61.14" y1="374.02" x2="80.79" y2="374.11"/><line class="cls-4" x1="61.53" y1="377.5" x2="80.49" y2="377.41"/><line class="cls-4" x1="61.1" y1="381.33" x2="80.84" y2="381.41"/><line class="cls-4" x1="61.27" y1="384.89" x2="80.92" y2="384.98"/><line class="cls-4" x1="61.89" y1="388.83" x2="80.85" y2="388.74"/><line class="cls-4" x1="61.46" y1="392.65" x2="81.2" y2="392.74"/><line class="cls-4" x1="61.63" y1="396.22" x2="81.28" y2="396.3"/><line class="cls-4" x1="62.02" y1="399.7" x2="80.98" y2="399.61"/><path class="cls-5" d="M204.91,326.22c1.19-5.88,2-12.58,2-12.58l.6,11.6,1.31-15.85L210,324.58l1.66-19.93,1.67,19,.71-8.66,1,8.34.6-17,1.54,16,.24-11.44L218.83,322"/><ellipse class="cls-1" cx="200.24" cy="319.63" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="199.72" cy="322.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="200.72" cy="325.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="202.72" cy="317.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="203.72" cy="327.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="207.72" cy="327.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="211.72" cy="327.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="215.72" cy="326.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="219.72" cy="325.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="222.72" cy="322.59" rx="1.67" ry="1.63"/><ellipse class="cls-1" cx="221.72" cy="319.59" rx="1.67" ry="1.63"/><path class="cls-6" d="M205.37,318.22a1.6,1.6,0,0,1-1.33-1.76c0-1,.6-1.76,1.33-1.76S206.1,318.22,205.37,318.22Z"/><path class="cls-7" d="M219.53,319.35a1.82,1.82,0,0,0,0-3.52C218.77,315.83,218.77,319.35,219.53,319.35Z"/><path class="cls-8" d="M280.39,288.48c1.57,12,27.65,14.09,13.57,21.91s-16.18,6.78-26.61,17.74S248,342.22,240.74,342.22s-15.65-2.61-26.61,0-26.61,4.69-37.56,3.13-32.35-4.7-37.57-5.22-14.61.52-16.7,1.57-6.78-.53-12.52-10.44-5.74-11-5.21-19.83S95.7,293.7,95.7,293.7l2.6-4.7"/><path class="cls-8" d="M304.91,328.13c-9.91.52-13.56-4.17-16.17,4.7s1,10.43,1,10.43,8.87-2.61,9.92.52,7.3,8.87,9.39,5.74,3.13-12,3.13-12Z"/><ellipse class="cls-9" cx="451" cy="321.09" rx="4.17" ry="6.52"/><polygon class="cls-1" points="483.03 315.08 462.6 316.15 455.79 317.23 456.19 324.21 465.2 323.94 482.83 324.48 482.63 332.27 495.44 331.46 495.04 314 483.03 315.08"/><line class="cls-10" x1="492.42" y1="314.04" x2="493.46" y2="308.82"/><path class="cls-11" d="M491.61,310c.22-1.6.37-3.43.37-3.43l.11,3.16.24-4.32.22,4.14.3-5.43.31,5.17.13-2.36.17,2.27.11-4.64.28,4.37,0-3.12.26,3"/><ellipse class="cls-1" cx="295.09" cy="339.7" rx="7.22" ry="5.83"/><path class="cls-12" d="M404.57,348.48c1.43-6.09,0-15.83,1.43-8.53a22.16,22.16,0,0,0,1.18,4.16c1.28,3.15,2.65,3.15,2.65,3.15l1.43-6.09"/><polyline class="cls-1" points="392.74 335.26 398.3 336.65 400.39 342.22 408.74 345 411.52 349.87"/><path class="cls-13" d="M308.34,296.15c4.07-3.65,6.94,0,6.94,0s-1.44,1.7,1.2,0,6.94-1.94,6.94-1.94l1.2,2.19"/><path class="cls-13" d="M316.48,297.12c-4.31,2.92-1.44,7.55-1.44,7.55"/><polyline class="cls-13" points="315.87 296.68 315.95 294 316.1 289.14"/><path class="cls-13" d="M315.86,294c1.2-.73,3.84-.49,3.84-.49"/><path class="cls-13" d="M312.27,294.37c1.19-.73,3.83-.48,3.83-.48"/><polygon class="cls-14" points="296.04 285.87 427.91 102.55 550.65 283.78 296.04 285.87"/><path d="M292,251.35h.08l2.45,3-2.06,3.2h0l-.13-2.25-6.27.44a5.35,5.35,0,0,0-.56.08,1.39,1.39,0,0,0-.39.17,1,1,0,0,0-.52.84,2.42,2.42,0,0,0,.51,1.23l1.66,2.46-1.33.9-1.66-2.46a5.65,5.65,0,0,1-.62-1.19,3.1,3.1,0,0,1-.19-1.14,2.16,2.16,0,0,1,.3-1,2.68,2.68,0,0,1,.86-.89,3.21,3.21,0,0,1,.79-.37,4.56,4.56,0,0,1,1.06-.19l6.27-.45Zm-6.67,14.07,0-.05,1.3-3.63,3.83.15,0,.05-1.89,1.28,3.53,5.23a1.67,1.67,0,0,0,.85.72,1,1,0,0,0,.84-.17,2.27,2.27,0,0,0,.57-.55,6.58,6.58,0,0,0,.57-1l.94-2,1.46.67-1.1,2.29a5.81,5.81,0,0,1-.71,1.14,3.92,3.92,0,0,1-.87.82,2.93,2.93,0,0,1-1,.43,2.45,2.45,0,0,1-1,0,2.77,2.77,0,0,1-1-.46,3.85,3.85,0,0,1-.92-1l-3.54-5.24ZM297,260.17a15.75,15.75,0,0,0-2.86.32,12.76,12.76,0,0,0-2.81.95l-.84-1.24a8.63,8.63,0,0,1,1.29-.51,11.36,11.36,0,0,1,1.28-.31,11,11,0,0,1,1.3-.14c.45,0,.91,0,1.38,0l-1.56-2.3,1-.67,2.4,3.56Zm3.8,4.12,0,.06-3.81.71-1.81-3.32,0-.05,2,1,2.57-5.45a4.33,4.33,0,0,0,.37-1,.93.93,0,0,0-.16-.73,1.06,1.06,0,0,0-.64-.46,3.36,3.36,0,0,0-1.06-.06l-2.93.17-.08-1.59,2.92-.16a9.34,9.34,0,0,1,1.06,0,3.07,3.07,0,0,1,.85.15,1.92,1.92,0,0,1,.69.37,2.9,2.9,0,0,1,.59.65,2.76,2.76,0,0,1,.35.74,2.46,2.46,0,0,1,.07.77,3.33,3.33,0,0,1-.18.84,8.84,8.84,0,0,1-.4,1l-2.57,5.43Z"/><path class="cls-10" d="M314.81,307.05s4.16,7.78,2.61,16.05c9.87,7.31,14,15.1,5.3,19.85,8.73-4.75,11.16-.2,7,10.31,9-1.4,11.46,3.15,11.46,3.15L371,412.24"/><line class="cls-10" x1="28.91" y1="99.43" x2="35.17" y2="285.87"/><polyline class="cls-10" points="38.65 272.65 50.48 272.65 50.48 284.48"/><rect class="cls-15" x="122.13" y="217" width="7.65" height="9.74"/><rect class="cls-16" x="121.43" y="230.91" width="9.04" height="17.39"/><polyline class="cls-15" points="114.48 230.91 109.61 237.17 121.44 233.7"/><polyline class="cls-15" points="137.44 231.61 142.3 235.78 143 244.83"/><line class="cls-15" x1="124.22" y1="249.7" x2="124.91" y2="265"/><polyline class="cls-15" points="129.09 251.78 131.87 262.91 129.78 270.56"/><polyline class="cls-16" points="120.04 205.17 125.61 214.91 129.78 203.09"/><rect class="cls-17" x="85.57" y="156.82" width="6.52" height="8.03"/><rect class="cls-18" x="84.98" y="168.3" width="7.7" height="14.35"/><polyline class="cls-17" points="79.05 168.3 77.9 173.47 84.98 170.6"/><polyline class="cls-17" points="93.61 168.87 95.75 172.32 98.35 179.78"/><line class="cls-17" x1="87.35" y1="183.79" x2="87.94" y2="196.42"/><polyline class="cls-17" points="91.5 185.51 93.87 194.7 92.09 201.01"/><polyline class="cls-18" points="83.79 147.07 88.53 155.1 92.09 145.35"/><text class="cls-19" transform="translate(310.23 282.2)">Lo</text><path class="cls-20" d="M388.81,92.47c.65,0,7.85-.13,12.05,4.23a8.57,8.57,0,0,1,2.52,6.77,8.09,8.09,0,0,1-2,5.92c-3.64,4.33-10.5,4.63-11.21,4.65,2.81-1.27,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.06-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76,14.85-1.37c2.75.05,4.92-1.69,4.76-3.6S391.34,92.41,388.81,92.47Z"/><rect class="cls-20" x="404.22" y="99.45" width="8.69" height="3.6"/><path class="cls-20" d="M343.26,93.64c.65,0,7.85-.12,12.05,4.23a8.63,8.63,0,0,1,2.52,6.77,8.12,8.12,0,0,1-2,5.93c-3.64,4.32-10.5,4.63-11.21,4.65,2.81-1.28,4.36-3.62,3.92-5.92-.51-2.71-3.53-4.07-3.92-4.23-5.23,0-10.46-1.52-15.7-1.52l-.56-1.76,14.86-1.38c2.74,0,4.92-1.69,4.76-3.59S345.79,93.59,343.26,93.64Z"/><rect class="cls-20" x="358.67" y="100.62" width="8.69" height="3.6"/><path class="cls-20" d="M298.74,95c.65,0,7.84-.13,12.05,4.23a8.6,8.6,0,0,1,2.52,6.76,8.12,8.12,0,0,1-2,5.93c-3.64,4.32-10.5,4.63-11.21,4.65,2.81-1.28,4.36-3.62,3.92-5.92-.51-2.71-3.53-4.07-3.92-4.23-5.23,0-10.47-1.52-15.7-1.52l-.56-1.76,14.86-1.38c2.74.06,4.91-1.69,4.76-3.59S301.26,95,298.74,95Z"/><rect class="cls-20" x="314.15" y="102.02" width="8.69" height="3.6"/><path class="cls-20" d="M247.93,97.21c.65,0,7.85-.13,12.05,4.23a8.6,8.6,0,0,1,2.53,6.77,8.16,8.16,0,0,1-2,5.92c-3.64,4.33-10.5,4.63-11.22,4.65,2.82-1.28,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.06-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76L247.93,104c2.75,0,4.92-1.7,4.77-3.6S250.46,97.15,247.93,97.21Z"/><rect class="cls-20" x="263.35" y="104.19" width="8.69" height="3.6"/><path class="cls-20" d="M202,98.51c.65,0,7.85-.12,12.05,4.23a8.58,8.58,0,0,1,2.52,6.77,8.09,8.09,0,0,1-2,5.92c-3.64,4.33-10.5,4.64-11.21,4.66,2.81-1.28,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.07-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76L202,105.28c2.75,0,4.92-1.69,4.76-3.59S204.57,98.46,202,98.51Z"/><rect class="cls-20" x="217.45" y="105.49" width="8.69" height="3.6"/><polygon onmouseover="fillDots()" id="fillDots" class="cls-21" points="360.04 -1.44 175.7 2.74 139.85 53.71 293.96 280.3 427.91 102.55 360.04 -1.44"/><line class="cls-22" x1="294.65" y1="94.22" x2="286.3" y2="181.17"/></svg>'}
var i;
var randomX;
var randomY;
var randomDot = Math.floor(Math.random() * 10) + 1;
var point;
var array01 = [];
function fillDots(){document.querySelector("#fillDots").setAttribute('onmouseover','deleteDots()');
var interval01 = setInterval(function () {
let randomX = Math.floor(Math.random() * 427) + 139,
randomY = Math.floor(Math.random() * 280) + 1;
point = document.querySelector("#Layer_1").createSVGPoint();
point.x = randomX;
point.y = randomY;
if (document.querySelector("#fillDots").isPointInFill(point)) {
//isPointInStroke
let ellipse = document.createElementNS(
"http://www.w3.org/2000/svg",
"ellipse"
);
document.querySelector("#Layer_1").appendChild(ellipse);
ellipse.setAttribute("rx", "5");
ellipse.setAttribute("ry", "5");
ellipse.setAttribute("cx", randomX + "px");
ellipse.setAttribute("cy", randomY + "px");
ellipse.style.fill = "green";
ellipse.style.opacity = "50%";
ellipse.setAttribute('class','dotClass');
}
}, 125);
setTimeout(function(){clearInterval(interval01);},4000);
}
function deleteDots(){var ellipseClass = $(".dotClass").toArray();array01.push(ellipseClass[randomDot]);console.log(array01)}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button onClick="levelOneGF()" id="setLevelOneButton">Level One</button>
<script src="Js/levelOneGF.js"></script>
</body>
</html>
function levelOneGF(){document.body.innerHTML='<svg id="Layer_1" height="400" width="700" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 400"><defs><style>.cls-1,.cls-11,.cls-12,.cls-2,.cls-3,.cls-5,.cls-6,.cls-7{fill:#fff;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-2,.cls-20,.cls-21,.cls-22,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke:#000;stroke-miterlimit:10;}.cls-2,.cls-4{stroke-width:0.5px;}.cls-3{stroke-width:0.53px;}.cls-10,.cls-13,.cls-20,.cls-22,.cls-4,.cls-8,.cls-9{fill:none;}.cls-21,.cls-22,.cls-5{stroke-width:0.75px;}.cls-6{stroke-width:0.92px;}.cls-7,.cls-8{stroke-width:0.94px;}.cls-9{stroke-width:0.58px;}.cls-11{stroke-width:0.17px;}.cls-12{stroke-width:0.55px;}.cls-13,.cls-14{stroke-width:0.35px;}.cls-14{opacity:0.28;}.cls-15,.cls-16{fill:blue;}.cls-16{stroke-width:0.88px;}.cls-17,.cls-18{fill:#ed1e79;}.cls-17{stroke-width:0.84px;}.cls-18{stroke-width:0.74px;}.cls-19{font-size:24px;font-family:Webdings;}.cls-20{stroke-width:0.35px;}.cls-21{opacity:0.33;}</style></defs><path class="cls-1" d="M104,4.39l201.5,295.34s5,7.3,13,9.75c1.9,12.14,6.88,19.43,15.13,13.89-8.25,5.54-5.34,9.81,5.89,11C334.11,341.7,337,346,337,346l35.67,52.29"/><line class="cls-1" x1="362.88" y1="1.93" x2="623" y2="392.73"/><line class="cls-1" x1="2.75" y1="97.64" x2="694.78" y2="98.25"/><line class="cls-1" x1="0.91" y1="289.05" x2="692.94" y2="284.14"/><line class="cls-2" x1="297.23" y1="283.53" x2="427.91" y2="102.55"/><line class="cls-2" x1="292.94" y1="278.01" x2="424.23" y2="97.02"/><line class="cls-2" x1="288.64" y1="271.26" x2="419.93" y2="92.12"/><line class="cls-2" x1="284.35" y1="266.35" x2="415.64" y2="84.14"/><line class="cls-2" x1="280.67" y1="260.21" x2="411.34" y2="76.17"/><line class="cls-2" x1="276.37" y1="252.85" x2="406.44" y2="69.42"/><line class="cls-2" x1="270.24" y1="244.88" x2="402.75" y2="62.06"/><line class="cls-2" x1="264.72" y1="237.52" x2="397.23" y2="54.69"/><line class="cls-2" x1="257.97" y1="228.31" x2="392.33" y2="46.72"/><line class="cls-2" x1="253.06" y1="221.56" x2="386.8" y2="39.97"/><line class="cls-2" x1="249.38" y1="214.2" x2="381.28" y2="30.77"/><line class="cls-2" x1="244.47" y1="206.84" x2="376.37" y2="23.4"/><line class="cls-2" x1="240.18" y1="200.71" x2="370.24" y2="17.27"/><line class="cls-2" x1="235.88" y1="196.41" x2="366.56" y2="12.98"/><line class="cls-2" x1="231.59" y1="188.44" x2="361.65" y2="5"/><line class="cls-2" x1="228.52" y1="181.07" x2="361.04" y2="-9.11"/><line class="cls-2" x1="224.23" y1="174.94" x2="354.9" y2="-15.25"/><line class="cls-2" x1="219.32" y1="167.58" x2="344.47" y2="-11.56"/><line class="cls-2" x1="212.04" y1="163.48" x2="343.25" y2="-19.95"/><line class="cls-2" x1="208.25" y1="156.17" x2="337.6" y2="-29.08"/><line class="cls-2" x1="203.24" y1="148.88" x2="332.59" y2="-36.37"/><line class="cls-2" x1="198.87" y1="142.81" x2="326.37" y2="-42.42"/><line class="cls-2" x1="194.51" y1="138.57" x2="322.63" y2="-46.66"/><line class="cls-2" x1="190.11" y1="130.66" x2="317.61" y2="-54.57"/><line class="cls-2" x1="186.94" y1="123.34" x2="316.8" y2="-68.67"/><line class="cls-2" x1="182.56" y1="117.26" x2="310.58" y2="-74.72"/><line class="cls-2" x1="177.55" y1="109.97" x2="300.2" y2="-70.89"/><line class="cls-2" x1="174.34" y1="107.23" x2="305.54" y2="-76.21"/><line class="cls-2" x1="170.55" y1="99.92" x2="299.89" y2="-85.33"/><line class="cls-2" x1="165.54" y1="92.62" x2="294.88" y2="-92.63"/><line class="cls-2" x1="161.16" y1="86.55" x2="288.67" y2="-98.68"/><line class="cls-2" x1="156.81" y1="82.31" x2="284.92" y2="-102.92"/><line class="cls-2" x1="152.41" y1="74.4" x2="279.91" y2="-110.83"/><line class="cls-2" x1="149.24" y1="67.08" x2="279.1" y2="-124.93"/><line class="cls-2" x1="144.86" y1="61.01" x2="272.88" y2="-130.98"/><line class="cls-2" x1="139.85" y1="53.71" x2="262.5" y2="-127.15"/><line class="cls-2" x1="346.31" y1="356.53" x2="587.42" y2="339.97"/><line class="cls-2" x1="364.1" y1="288.44" x2="399.07" y2="350.4"/><line class="cls-2" x1="419.32" y1="285.98" x2="451.83" y2="346.1"/><line class="cls-2" x1="476.37" y1="287.21" x2="504.6" y2="343.04"/><line class="cls-2" x1="519.93" y1="285.98" x2="549.38" y2="341.81"/><path class="cls-3" d="M83.09,286.73c-2.79-.39-2.07,3-2.07,9.29V400.31c0,6.31-4.56,11.47-10.13,11.47h0c-5.56,0-10.12-5.16-10.12-11.47V296c0-6.31,4.56-11.47,10.12-11.47"/><line class="cls-4" x1="61.09" y1="294.57" x2="80.22" y2="294.65"/><line class="cls-4" x1="61.17" y1="299.78" x2="80.13" y2="299.7"/><line class="cls-4" x1="60.74" y1="303.61" x2="80.48" y2="303.7"/><line class="cls-4" x1="60.91" y1="307.17" x2="80.57" y2="307.26"/><line class="cls-4" x1="61.3" y1="310.65" x2="80.26" y2="310.57"/><line class="cls-4" x1="60.87" y1="314.48" x2="80.61" y2="314.57"/><line class="cls-4" x1="61.04" y1="318.04" x2="80.7" y2="318.13"/><line class="cls-4" x1="61.33" y1="322.09" x2="80.28" y2="322"/><line class="cls-4" x1="60.89" y1="325.91" x2="80.63" y2="326"/><line class="cls-4" x1="61.07" y1="329.48" x2="80.72" y2="329.57"/><line class="cls-4" x1="61.46" y1="332.96" x2="80.41" y2="332.87"/><line class="cls-4" x1="61.02" y1="336.78" x2="80.76" y2="336.87"/><line class="cls-4" x1="61.2" y1="340.35" x2="80.85" y2="340.43"/><line class="cls-4" x1="61.25" y1="344.33" x2="80.21" y2="344.24"/><line class="cls-4" x1="60.82" y1="348.15" x2="80.55" y2="348.24"/><line class="cls-4" x1="60.99" y1="351.72" x2="80.64" y2="351.8"/><line class="cls-4" x1="61.38" y1="355.2" x2="80.34" y2="355.11"/><line class="cls-4" x1="60.95" y1="359.02" x2="80.68" y2="359.11"/><line class="cls-4" x1="61.12" y1="362.59" x2="80.77" y2="362.67"/><line class="cls-4" x1="61.4" y1="366.63" x2="80.36" y2="366.54"/><line class="cls-4" x1="60.97" y1="370.46" x2="80.71" y2="370.54"/><line class="cls-4" x1="61.14" y1="374.02" x2="80.79" y2="374.11"/><rect class="cls-20" x="263.35" y="104.19" width="8.69" height="3.6"/><path class="cls-20" d="M202,98.51c.65,0,7.85-.12,12.05,4.23a8.58,8.58,0,0,1,2.52,6.77,8.09,8.09,0,0,1-2,5.92c-3.64,4.33-10.5,4.64-11.21,4.66,2.81-1.28,4.36-3.62,3.93-5.92-.52-2.71-3.54-4.07-3.93-4.23-5.23,0-10.46-1.52-15.69-1.52l-.56-1.76L202,105.28c2.75,0,4.92-1.69,4.76-3.59S204.57,98.46,202,98.51Z"/><rect class="cls-20" x="217.45" y="105.49" width="8.69" height="3.6"/><polygon onmouseover="fillDots()" id="fillDots" class="cls-21" points="360.04 -1.44 175.7 2.74 139.85 53.71 293.96 280.3 427.91 102.55 360.04 -1.44"/><line class="cls-22" x1="294.65" y1="94.22" x2="286.3" y2="181.17"/></svg>'}
var i;
var randomX;
var randomY;
var randomDot = Math.floor(Math.random() * 10) + 1;
var point;
var array01 = [];
function fillDots(){document.querySelector("#fillDots").setAttribute('onmouseover','deleteDots()');
var interval01 = setInterval(function () {
let randomX = Math.floor(Math.random() * 427) + 139,
randomY = Math.floor(Math.random() * 280) + 1;
point = document.querySelector("#Layer_1").createSVGPoint();
point.x = randomX;
point.y = randomY;
if (document.querySelector("#fillDots").isPointInFill(point)) {
//isPointInStroke
let ellipse = document.createElementNS(
"http://www.w3.org/2000/svg",
"ellipse"
);
document.querySelector("#Layer_1").appendChild(ellipse);
ellipse.setAttribute("rx", "5");
ellipse.setAttribute("ry", "5");
ellipse.setAttribute("cx", randomX + "px");
ellipse.setAttribute("cy", randomY + "px");
ellipse.style.fill = "green";
ellipse.style.opacity = "50%";
ellipse.setAttribute('class','dotClass');
}
}, 125);
setTimeout(function(){clearInterval(interval01);},4000);
}
function deleteDots(){var ellipseClass = $(".dotClass").toArray();console.log(ellipseClass)}
//setInterval(function(){randomX = Math.floor(Math.random() * 220) + 195;randomY = Math.floor(Math.random() * 180) + 90;var ellipse=document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');document.querySelector("#Layer_1").appendChild(ellipse);ellipse.setAttribute('rx','5');ellipse.setAttribute('ry','5');ellipse.setAttribute('cx',randomX+'px');ellipse.setAttribute('cy',randomY+'px');ellipse.style.fill='red'},1000);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button onClick="levelOneGF()" id="setLevelOneButton">Level One</button>
<script src="Js/levelOneGF.js"></script>
</body>
</html>
I hover over the lined area and about ten green dots appear, I set those green dots to an array, what I would like to do now is delete about half maybe a third of them at the least when I hover back over them. I tried using removeAttributeNode, and I feel like this may work. so if there is a solution using remove attribute node that would be best. Thank you.
Based on your example, you use a
.dotClass
to identify the Ellipse that's been added and when you triggerdeleteDots
function, you select the class and set it to array by usingThen what you need to remove the Ellipse is just call
Here's the updated results on JSFiddle