https://gv-lastfm-playground.vercel.app/js/blinds.js

1const showBlinds = () => {
2  document.querySelectorAll(".media__blinds").forEach((item) => {
3    item.innerHTML = `
4      <?xml version="1.0" encoding="UTF-8"?>
5      <svg
6        class="img_swipe"
7        xmlns="http://www.w3.org/2000/svg"
8        viewBox="0 0 400 400"
9      >
10        <defs>
11          <style>
12            .cls-1,
13            .cls-2 {
14              fill: none;
15              stroke-miterlimit: 10;
16              stroke-width: 6px;
17            }
18            .cls-2 {
19              stroke: #000;
20            }
21          </style>
22        </defs>
23        <g>
24          <line class="cls-2" x1="225.32" y1="627.51" x2="626.96" y2="225.87" />
25          <line class="cls-2" x1="219.7" y1="621.88" x2="621.33" y2="220.25" />
26          <line class="cls-2" x1="214.08" y1="616.26" x2="615.71" y2="214.63" />
27          <line class="cls-2" x1="208.45" y1="610.64" x2="610.09" y2="209" />
28          <line class="cls-2" x1="202.83" y1="605.02" x2="604.47" y2="203.38" />
29          <line class="cls-2" x1="197.21" y1="599.4" x2="598.85" y2="197.76" />
30          <line class="cls-2" x1="191.59" y1="593.78" x2="593.23" y2="192.14" />
31          <line class="cls-2" x1="185.97" y1="588.15" x2="587.6" y2="186.52" />
32          <line class="cls-2" x1="180.34" y1="582.53" x2="581.98" y2="180.89" />
33          <line class="cls-2" x1="174.72" y1="576.91" x2="576.36" y2="175.27" />
34          <line class="cls-2" x1="169.1" y1="571.29" x2="570.74" y2="169.65" />
35          <line class="cls-2" x1="163.48" y1="565.67" x2="565.12" y2="164.03" />
36          <line class="cls-2" x1="157.86" y1="560.04" x2="559.49" y2="158.41" />
37          <line class="cls-2" x1="152.23" y1="554.42" x2="553.87" y2="152.79" />
38          <line class="cls-2" x1="146.61" y1="548.8" x2="548.25" y2="147.16" />
39          <line class="cls-2" x1="140.99" y1="543.18" x2="542.63" y2="141.54" />
40          <line class="cls-2" x1="135.37" y1="537.56" x2="537.01" y2="135.92" />
41          <line class="cls-2" x1="129.75" y1="531.93" x2="531.38" y2="130.3" />
42          <line class="cls-2" x1="124.13" y1="526.31" x2="525.76" y2="124.68" />
43          <line class="cls-2" x1="118.5" y1="520.69" x2="520.14" y2="119.05" />
44          <line class="cls-2" x1="112.88" y1="515.07" x2="514.52" y2="113.43" />
45          <line class="cls-2" x1="107.26" y1="509.45" x2="508.9" y2="107.81" />
46          <line class="cls-2" x1="101.64" y1="503.82" x2="503.27" y2="102.19" />
47          <line class="cls-2" x1="96.02" y1="498.2" x2="497.65" y2="96.57" />
48          <line class="cls-2" x1="90.39" y1="492.58" x2="492.03" y2="90.94" />
49          <line class="cls-2" x1="84.77" y1="486.96" x2="486.41" y2="85.32" />
50          <line class="cls-2" x1="79.15" y1="481.34" x2="480.79" y2="79.7" />
51          <line class="cls-2" x1="73.53" y1="475.71" x2="475.16" y2="74.08" />
52          <line class="cls-2" x1="67.91" y1="470.09" x2="469.54" y2="68.46" />
53          <line class="cls-2" x1="62.28" y1="464.47" x2="463.92" y2="62.83" />
54          <line class="cls-2" x1="56.66" y1="458.85" x2="458.3" y2="57.21" />
55          <line class="cls-2" x1="51.04" y1="453.23" x2="452.68" y2="51.59" />
56          <line class="cls-2" x1="45.42" y1="447.6" x2="447.05" y2="45.97" />
57          <line class="cls-2" x1="39.8" y1="441.98" x2="441.43" y2="40.35" />
58          <line class="cls-2" x1="34.17" y1="436.36" x2="435.81" y2="34.72" />
59          <line class="cls-2" x1="28.55" y1="430.74" x2="430.19" y2="29.1" />
60          <line class="cls-2" x1="22.93" y1="425.12" x2="424.57" y2="23.48" />
61          <line class="cls-2" x1="17.31" y1="419.5" x2="418.95" y2="17.86" />
62          <line class="cls-2" x1="11.69" y1="413.87" x2="413.32" y2="12.24" />
63          <line class="cls-2" x1="6.06" y1="408.25" x2="407.7" y2="6.61" />
64          <line class="cls-2" x1=".44" y1="402.63" x2="402.08" y2=".99" />
65          <line class="cls-2" x1="-5.18" y1="397.01" x2="396.46" y2="-4.63" />
66          <line class="cls-2" x1="-10.8" y1="391.39" x2="390.84" y2="-10.25" />
67          <line class="cls-2" x1="-16.42" y1="385.76" x2="385.21" y2="-15.87" />
68          <line class="cls-2" x1="-22.05" y1="380.14" x2="379.59" y2="-21.5" />
69          <line class="cls-2" x1="-27.67" y1="374.52" x2="373.97" y2="-27.12" />
70          <line class="cls-2" x1="-33.29" y1="368.9" x2="368.35" y2="-32.74" />
71          <line class="cls-2" x1="-38.91" y1="363.28" x2="362.73" y2="-38.36" />
72          <line class="cls-2" x1="-44.53" y1="357.65" x2="357.1" y2="-43.98" />
73          <line class="cls-2" x1="-50.15" y1="352.03" x2="351.48" y2="-49.6" />
74          <line class="cls-2" x1="-55.78" y1="346.41" x2="345.86" y2="-55.23" />
75          <line class="cls-2" x1="-61.4" y1="340.79" x2="340.24" y2="-60.85" />
76          <line class="cls-2" x1="-67.02" y1="335.17" x2="334.62" y2="-66.47" />
77          <line class="cls-2" x1="-72.64" y1="329.54" x2="328.99" y2="-72.09" />
78          <line class="cls-2" x1="-78.26" y1="323.92" x2="323.37" y2="-77.71" />
79          <line class="cls-2" x1="-83.89" y1="318.3" x2="317.75" y2="-83.34" />
80          <line class="cls-2" x1="-89.51" y1="312.68" x2="312.13" y2="-88.96" />
81          <line class="cls-2" x1="-95.13" y1="307.06" x2="306.51" y2="-94.58" />
82          <line class="cls-2" x1="-100.75" y1="301.43" x2="300.88" y2="-100.2" />
83          <line class="cls-2" x1="-106.37" y1="295.81" x2="295.26" y2="-105.82" />
84          <line class="cls-2" x1="-112" y1="290.19" x2="289.64" y2="-111.45" />
85          <line class="cls-2" x1="-117.62" y1="284.57" x2="284.02" y2="-117.07" />
86          <line class="cls-2" x1="-123.24" y1="278.95" x2="278.4" y2="-122.69" />
87          <line class="cls-2" x1="-128.86" y1="273.32" x2="272.77" y2="-128.31" />
88          <line class="cls-2" x1="-134.48" y1="267.7" x2="267.15" y2="-133.93" />
89          <line class="cls-2" x1="-140.11" y1="262.08" x2="261.53" y2="-139.56" />
90          <line class="cls-2" x1="-145.73" y1="256.46" x2="255.91" y2="-145.18" />
91
92          <!-- flashing line -->
93          <line class="cls-2" x1="-151.35" y1="250.84" x2="250.29" y2="-150.8" />
94
95          <line class="cls-2" x1="-156.97" y1="245.21" x2="244.67" y2="-156.42" />
96          <line class="cls-2" x1="-162.59" y1="239.59" x2="239.04" y2="-162.04" />
97          <line class="cls-2" x1="-168.22" y1="233.97" x2="233.42" y2="-167.67" />
98          <line class="cls-2" x1="-173.84" y1="228.35" x2="227.8" y2="-173.29" />
99          <line class="cls-2" x1="-179.46" y1="222.73" x2="222.18" y2="-178.91" />
100          <line class="cls-2" x1="-185.08" y1="217.11" x2="216.56" y2="-184.53" />
101          <line class="cls-2" x1="-190.7" y1="211.48" x2="210.93" y2="-190.15" />
102          <line class="cls-2" x1="-196.33" y1="205.86" x2="205.31" y2="-195.78" />
103          <line class="cls-2" x1="-201.95" y1="200.24" x2="199.69" y2="-201.4" />
104          <line class="cls-2" x1="-207.57" y1="194.62" x2="194.07" y2="-207.02" />
105          <line class="cls-2" x1="-213.19" y1="189" x2="188.45" y2="-212.64" />
106          <line class="cls-2" x1="-218.81" y1="183.37" x2="182.82" y2="-218.26" />
107          <line class="cls-2" x1="-224.43" y1="177.75" x2="177.2" y2="-223.88" />
108          <line class="cls-2" x1="-230.06" y1="172.13" x2="171.58" y2="-229.51" />
109        </g>
110      </svg>
111    `;
112  });
113};
114
115showBlinds();
116
117const showBubbleBlinds = () => {
118  document
119    .querySelectorAll(".bubble-chart .highcharts-point")
120    .forEach((item, index) => {
121      item.style.fill = "url(#diagonalHatch)";
122    });
123};
124
125showBubbleBlinds();