Сейчас я полностью отредактировал вопрос! Как сверстать по картинке? Я нашел такой выход (см. ссылку). Сам еще новичок. Предложите свой вариант. Но вот анимировать помогите. Заливается все последовательно, включая блоки с цифрами от 1 до 4.
.container {
padding: 5px;
position: relative;
height: 350px;
}
svg {
padding: 5px;
width: 100px;
height: 125px;
position: absolute;
}
path {
fill: transparent;
stroke: grey;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hex1 {
bottom: 135px;
left: 95px;
}
.hex2 {
top: 0;
left: 145px;
}
.hex3 {
bottom: 175px;
left: 245px;
}
.hex4 {
bottom: 225px;
left: 345px;
}
.fill {
stroke: red;
stroke-width: 4;
stroke-dasharray: 10 10;
stroke-dashoffset: 10;
-webkit-animation: drawPath 2s linear infinite;
animation: drawPath 2s linear infinite;
}
@-webkit-keyframes drawPath {
50% {
stroke-dashoffset: 0;
}
}
@keyframes drawPath {
50% {
stroke-dashoffset: 0;
}
}
.circle {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
text-align: center;
z-index: 2;
}
.circle1 {
bottom: 215px;
left: 90px;
}
.circle2 {
top: 0;
left: 190px;
}
.circle3 {
bottom: 295px;
left: 290px;
}
.circle4 {
bottom: 255px;
left: 440px;
}
<div class="container">
<div class="circle circle1">1</div>
<svg class="hex1" xmlns="http://www.w3.org/2000/svg">
<path class="fill" d="M50 0 0 40"></path>
<path d="M0 40 0 90"></path>
<path d="M0 90 50 130"></path>
<path d="M50 130 100 90"></path>
<path d="M100 90 100 40"></path>
<path d="M100 40 50 0"></path>
</svg>
<div class="circle circle2">2</div>
<svg class="hex2" xmlns="http://www.w3.org/2000/svg">
<path class="fill" d="M50 0 0 40"></path>
<path class="fill" d="M0 40 0 90"></path>
<path d="M0 90 50 130"></path>
<path d="M50 130 100 90"></path>
<path class="fill" d="M100 90 100 40"></path>
<path class="fill" d="M100 40 50 0"></path>
</svg>
<div class="circle circle3">3</div>
<svg class="hex3" xmlns="http://www.w3.org/2000/svg">
<path class="fill" d="M50 0 0 40"></path>
<path d="M0 40 0 90"></path>
<path d="M0 90 50 130"></path>
<path d="M50 130 100 90"></path>
<path d="M100 90 100 40"></path>
<path class="fill" d="M100 40 50 0"></path>
</svg>
<div class="circle circle4">4</div>
<svg class="hex4" xmlns="http://www.w3.org/2000/svg">
<path class="fill" d="M50 0 0 40"></path>
<path class="fill" d="M0 40 0 90"></path>
<path d="M0 90 50 130"></path>
<path d="M50 130 100 90"></path>
<path class="fill" d="M100 90 100 40"></path>
<path class="fill" d="M100 40 50 0"></path>
</svg>
</div>