1

Сейчас я полностью отредактировал вопрос! Как сверстать по картинке? Я нашел такой выход (см. ссылку). Сам еще новичок. Предложите свой вариант. Но вот анимировать помогите. Заливается все последовательно, включая блоки с цифрами от 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>

Как это сверстать?

3
  • зачем плодить svg(шки) линии? у тебя всего два вида line на примере(красный и серый). svg #red, svg #gray.
    – Anonymous
    Commented 6 мая 2017 в 21:29
  • Вот поэтому и обратился за помощью. У меня не хватает знаний, чтоб двигаться дальше.
    – Shamil
    Commented 7 мая 2017 в 7:39
  • я не эксперт в веб разработках, но даже я вижу. что очень очень кривовато, и скорее всего совсем не так всё надо делать. :)
    – Anonymous
    Commented 7 мая 2017 в 7:42

1 ответ 1

3
  1. Повторяющиеся фигуры стоит переиспользовать через <symbol> + <use>
  2. Сверху по нужному контуру наложить фигуру <polyline>
  3. Сделать stroke-dasharray равным длине линии, в нашем случае 625
  4. Анимировать stroke-dasharray
  5. Поскольку CSS-анимации декларативны и не дают возможность задавать последовательность, надо подгадать время и анимировать кружочки когда линия будет примерно рядом.

.container {
  padding: 5px;
  position: relative;
  height: 350px;
}

svg {
  padding: 5px;
  position: absolute;
}

.grey {
  fill: transparent;
  stroke: grey;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.red {
  fill: transparent;
  stroke: red;
  stroke-width: 2;
  stroke-dasharray: 625 625;
  stroke-dashoffset: 625;
  animation: drawPath 2s linear forwards;
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: grey;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  animation: changeColor .2s linear forwards;
  z-index: 2;
}

.circle1 {
  top: 103px;
  left: 120px;
  animation-delay: .55s;
}

.circle2 {
  top: 138px;
  left: 180px;
  animation-delay: .8s;
}

.circle3 {
  top: 138px;
  left: 300px;
  animation-delay: 1.2s;
}

.circle4 {
  top: 1px;
  left: 422px;
  animation-delay: 2s;
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes changeColor {
  to {
    background-color: red;
    color: black;
  }
}
<div class="container">
  <div class="circle circle1">1</div>
  <div class="circle circle2">2</div>
  <div class="circle circle3">3</div>
  <div class="circle circle4">4</div>
  <svg xmlns="http://www.w3.org/2000/svg" width=500 height=500>
    <symbol id="hexagon">
      <polyline class="grey" points="60,0 120,40 120,100 60,140 0,100 0,40 60,0" />
    </symbol>
    <use xlink:href="#hexagon" x="0" y="0"/>
    <use xlink:href="#hexagon" x="60" y="100"/>
    <use xlink:href="#hexagon" x="180" y="100"/>
    <use xlink:href="#hexagon" x="300" y="100"/>
    <use xlink:href="#hexagon" x="360" y="0"/>
    
    <polyline class="red" points="0,40 60,0 120,40 120,100 180,140 240,100 300,140 360,100 360,40 420,0" />
  </svg>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.