Вариант с нанесением стрелок на растровое изображение.
Этот вариант даёт возможность нанести стрелки на растровое изображения без использования растрового редактора.
Так как при этом используется SVG, то становится возможным анимировать эти стрелки.
#1 Статичные стрелки
Для стрелки используется линия c координатами начала x1 y1
и конца x2 y2
и маркер на её конце
marker-end
Изменяя координаты линии можно задавать любое направление, маркер автоматически будет расположен на конце линии - orient="auto"
Изображение добавлено в SVG с помощью команды
<image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" width="1920" height="1440" />
что позволяет сохранить взаимное расположение растрового изображения и векторных стрелок.
Вёрстка никогда не сломается при изменении размера дисплея.
html {
font-family: monospace;
background-color: #efefef;
}
.container {
width:75%;
height:75%;
}
.txt {
font-size: 50px;
font-weight:700;
}
.image svg {
width: 1920px;
height: 1440px;
}
<div class="container">
<svg viewBox="0 0 1920 1440">
<defs>
<marker id="arrow" markerWidth="20" markerHeight="20" refX="0" refY="12" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 20,10 0,20 2,10 z" fill="red" />
</marker>
</defs>
<text class="txt" x="1000" y="50" text-anchor="middle" > Что нового в этой модели Nissan </text>
<image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" width="1920" height="1440" />
<line x1="900" y1="100" x2="154" y2="833" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />
<line x1="900" y1="100" x2="400" y2="833" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />
<line x1="900" y1="100" x2="1000" y2="633" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />
<line x1="900" y1="100" x2="1750" y2="633" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />
</svg>
</div>
#2 Динамические стрелки
Анимация стрелок осуществляется изменением координат конца линии X2,Y2
<animate id="anX2" attributeName="x2" values="900;400" begin=anY1.end dur="2s" fill="freeze" />
<animate id="anY2" attributeName="y2" values="100;833" begin=anY1.end dur="2s" fill="freeze" />
Последовательность анимации стрелок задается в атрибуте begin=anY1.end"
Данная запись означает - начало анимации после окончания анимации с id=anY1
html {
font-family: monospace;
background-color: #efefef;
}
.container {
width:75%;
height:75%;
}
.txt {
font-size: 50px;
font-weight:700;
}
.image svg {
width: 1920px;
height: 1440px;
}
<div class="container">
<svg viewBox="0 0 1920 1440">
<defs>
<marker id="arrow"
markerWidth="20"
markerHeight="20"
refX="0"
refY="12"
orient="auto"
markerUnits="strokeWidth">
<path d="M0,0 20,10 0,20 2,10 z" fill="red" />
</marker>
</defs>
<text class="txt" x="1000" y="50" text-anchor="middle" > Что нового в этой модели Nissan </text>
<image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" width="1920" height="1440" />
<line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1" marker-end="url(#arrow)" >
<animate id="anX1"
attributeName="x2"
values="900;154"
begin="0s;anY4.end"
dur="1.5s"
fill="freeze" />
<animate id="anY1"
attributeName="y2"
values="100;833"
begin="0s;anY4.end"
dur="1.5s"
fill="freeze" />
</line>
<line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1" marker-end="url(#arrow)" >
<animate id="anX2"
attributeName="x2"
values="900;400"
begin="anY1.end"
dur="1.5s"
fill="freeze" />
<animate id="anY2"
attributeName="y2"
values="100;833"
begin="anY1.end"
dur="1.5s"
fill="freeze" />
</line>
<line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1" marker-end="url(#arrow)" >
<animate id="anX3"
attributeName="x2"
values="900;1000"
begin="anY2.end"
dur="1.5s"
fill="freeze" />
<animate id="anY3"
attributeName="y2"
values="100;633"
begin="anY2.end"
dur="1.5s"
fill="freeze" />
</line>
<line x1="900" y1="100" x2="900" y2="100" stroke="#000" stroke-width="1" marker-end="url(#arrow)" >
<animate id="anX4" attributeName="x2" values="900;1750" begin="anY3.end" dur="1.5s" fill="freeze" />
<animate id="anY4" attributeName="y2" values="100;633" begin="anY3.end" dur="1.5s" fill="freeze" />
</line>
</svg>
</div>
begin="0s;anY4.end"
- команда на зацикливание анимации. Запись означает - запуск первой анимации рисования первой линии с нулевой секунды, повторный запуск анимации начнется после окончания анимации рисования последней линии.
Ответ @Alexandr_TT