Максим

Хотя лучше для этого использовать svg маски css.yoksel.ru/svg-masks

https://github.com/anseki/leader-line

SVG - Scalable Vector Graphic - Масштабируемая векторная графика
CSS - Cascading Style Sheets - Каскадные таблицы стилей

Как? КАК???
КАК, блин, вообще могло прийти в голову сравнивать красное с круглым?

Для чего нужен SVG?

А это норм вопрос. Только ответ на него в самом названии есть — для векторной графики.

Вот ваши фигуры:

<svg width="496" height="325" viewBox="0 0 496 325" fill="none" xmlns="http://www.w3.org/2000/svg">
<path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M483 64.6C487.3 63.4 491.6 62.4 495.9 61.6C484.6 57.7 471.5 55.4 457.6 55.4C432.4 55.4 410.1 62.7 396.1 73.9C382.7 64.2 367 57.3 350 53.9C335.7 34.4 301.2 20.6 260.9 20.6C244.5 20.6 229.1 22.9 215.6 26.9C204 19.6 190.7 13.4 175.8 8.40001C102.5 -16.1 26.1 14.8 4.89999 77.7C-16.3 140.5 31 256.6 158.7 283.8C180.6 308.7 216.4 325 256.8 325C308.6 325 352.7 298.3 369.9 260.9C411.8 244.6 441.3 205.7 441.3 160.4C441.3 137.6 433.9 116.5 421.1 99C434.2 84.7 456.3 71.8 483 64.6Z"/>
</svg>

<svg width="469" height="318" viewBox="0 0 469 318" fill="none" xmlns="http://www.w3.org/2000/svg">
<path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M454.1 64.9L27.5 0.299997C10.9 -2.1 -3 12.8 0.6 29.1L56.7 265.9C59.8 279.2 72.4 288 86 286.5L296.9 262.8L390.2 317.3L357.7 255.9L412.2 249.8C420.9 248.8 428 242.6 430.2 234.1L468 85.5C470.3 75.8 463.9 66.4 454.1 64.9Z"/>
</svg>

<svg width="497" height="436" viewBox="0 0 497 436" fill="none" xmlns="http://www.w3.org/2000/svg">
<path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M492.9 238.7L465.8 193.6L478.4 137.3C481.4 124 471.7 111.2 458 110.5L380.4 106.6L394.6 36.8L318.5 71.9L260.3 6.8C252.3 -2.2 238.1 -2.1 230.3 7.1L154.1 95.4L67.5 91.1C60 90.7 53.2 95.6 51.3 102.9L41.7 138.2L20 144.8C7.70002 148.5 0.900013 161.6 4.80001 173.8L19.4 219.7L0.800013 287C-1.89999 296.7 3.5 306.8 13.1 310L52.2 323.1L64.6 362.1C68.4 374 81.2 380.3 92.9 376.2L150 355.9L151.2 356.3L192.9 423.3C199.3 433.6 212.8 436.7 223.1 430.4L275.7 398L385.7 434.8C398.6 439.1 412.5 431.3 415.4 418L442.9 294.9L485.3 268.8C495.8 262.4 499.1 249 492.9 238.7Z"/>
</svg>

Соответственно:
d="..." - координаты точек
stroke-dasharray: 8 4 - длина пунктира и отступ между
stroke: black - цвет обводки
stroke-width: 2px - толщина

У всех кроме каждого 4го левую границу.
У всех кроме первых 4х верхнюю.

:not(:nth-child(4n))
:not(:nth-child(-n - 4))

p.s. И еще это не table.

CSS GRID Пример

Можно спрайтами, у меня дыма готового нет, но есть свеча для примера:

Это path-ы с stroke-dasharray.

Заголовки должны идти последовательно. Можете посмотреть эту статью.

«Инструкция 1» — это заголовок h1. <h1>Инструкция 1</h1>
«Подготовка оборудования» — заголовок h2. <h2>Подготовка оборудования</h2>

С учётом центрирования вам надо будет добавить класс text-center. Получится примерно так

<h1 class="text-center">Инструкция 1</h1>
<h2 class="text-center">Подготовка оборудования</h2>

Текст обрамляйте в теги параграфов <p></p>
Все списки обрамляйте в нужные теги. <ol></ol>(нумерованный список) или <ul></ul>(ненумерованный список)

Внутри списков сами пункты обрамляются в <li></li>

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

Я бы вставил ссылку на бесплатные курсы, но этот сайт тут запрещён -_-. Просто введите в поисковик «Разметка текста HTML» и найдёте множество информации. Или можете найти Code Basics

Вначале этого будет достаточно. Посмотрите базовые структуры разметки текста.

Например так

Как-то так https://jsfiddle.net/rmg83fvj/



Не забудьте, что инпутам нужен label. Но это уже самостоятельно.

const oldSvg = data.editor.svg;
      const newSvg = svg.trim()
        .replace(/(^<\?xml[^>]*>)|/g, '')
        .trim()
        .replace(/(^<svg[^>]*>)|(<\/svg>$)/g, '');
      const position = oldSvg.length - 6;
      const svgResult = [oldSvg.slice(0, position), newSvg, oldSvg.slice(position)].join('');

Нашел как решить

`<div>
    text
    <div>
        text2
    </div>
</div>`