другое решение с <canvas>
const eCanvas = document.getElementById('elmCanvas')
, cCanvas = eCanvas.getContext('2d')
, bot_inversor = 80
, top_fotovolta = 300
;
// set background color
cCanvas.fillStyle = 'rgb(178, 240, 240)'
cCanvas.fillRect(0, 0, eCanvas.width, eCanvas.height )
Draw_Inversor( cCanvas, (eCanvas.width/2 - 70/2), 10)
for (let i=0;i<4;i++)
{
Draw_Fotovoltaico( cCanvas, 10+(i*60), top_fotovolta );
Draw_connectsLines( cCanvas, i, 4, (eCanvas.width/2), (10+(i*60)+25) );
}
function Draw_Inversor( ctx, x, y )
{
ctx.beginPath();
ctx.moveTo(x+70, y);
ctx.lineTo(x, y+70);
ctx.lineTo(x, y);
ctx.lineTo(x+70, y);
ctx.lineTo(x+70, y+70);
ctx.lineTo(x, y+70);
ctx.moveTo(x+10, y+15);
ctx.lineTo(x+30, y+15);
ctx.moveTo(x+10, y+20);
ctx.lineTo(x+30, y+20);
ctx.moveTo(x+50, y+55);
ctx.arc(x+45, y+55, 5, 0, Math.PI, true);
ctx.moveTo(x+60, y+55);
ctx.arc(x+55, y+55, 5, 0, Math.PI, false);
ctx.stroke();
}
function Draw_Fotovoltaico( ctx, x, y )
{
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x+25, y+20);
ctx.lineTo(x+50, y);
ctx.lineTo(x, y);
ctx.lineTo(x, y+70);
ctx.lineTo(x+50, y+70);
ctx.lineTo(x+50, y);
ctx.stroke();
}
function Draw_connectsLines( ctx, no, maxOcc, topCenter, botCenter )
{
let mid = maxOcc/2
, left = no < mid
, decal = left ? no :(maxOcc/2)-no+1
, topL1 = 50+ (decal *30)
, topL2 = topL1 +10
, topX1 = topCenter + (left? -(mid-decal)*10 : +(mid-decal)*10 )
, topX2 = topX1 +(left?+5:-5)
, botX1 = botCenter + (left?-10:+10)
, botX2 = botCenter + (left?+10:-10)
;
ctx.beginPath();
ctx.moveTo(topX1, bot_inversor);
ctx.lineTo(topX1, bot_inversor +topL1 );
ctx.lineTo(botX1, bot_inversor +topL1 );
ctx.lineTo(botX1, top_fotovolta );
ctx.stroke();
ctx.beginPath();
ctx.moveTo(topX2, bot_inversor);
ctx.lineTo(topX2, bot_inversor +topL2 );
ctx.lineTo(botX2, bot_inversor +topL2 );
ctx.lineTo(botX2, top_fotovolta );
ctx.stroke();
}
#elmCanvas {
margin: 1em;
}
<canvas id="elmCanvas" width="250" height="400"></canvas>