CODEWITHSUNDEEP
css
DD1229
DD1229

Reputation: 408

SVG Lines Between Grid Boxes

I'm trying to add an animated SVG line in between my grid boxes, sort of like this example, but horizontally.

I'm running into two issues that, after all my reading, I'm still unable to solve:

1: How might you align the SVG line to the middle of the other boxes? 2: I'd love for the dots to be animated like in the example above, but borrowing that code and applying it to the line doesn't seem to have any affect.

svg {
    height: 5rem;
    width: 100%;
    text-align: center;
}

svg>line {
    stroke: #000;
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-dasharray: 1px 10px;
    animation: animateline 5s linear both infinite;
}

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0;
}

.box {
    border: 2px solid #000;
}

<div class="container">
    <div class="box">
        <p>Box 1</p>
    </div>
    <svg>
        <line x1="0" x2="500" y1="10" y2="10" />
    </svg>
    <div class="box">
        <p>Box 2</p>
    </div>
    <svg>
        <line x1="0" x2="500" y1="10" y2="10" />
    </svg>
    <div class="box">
        <p>Box 3</p>
    </div>
</div>

Upvotes: 0

Views: 550

Answers (1)

Temani Afif
Temani Afif

Reputation: 272734

Here is an easier idea that rely on gradient and animation of background-position. You should, by the way, add background to the box element to hide the non need part of the background:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc(100%/5) calc(100%/5) calc(100%/5);
    grid-gap: calc(100%/5);
    background:radial-gradient(8px 4px at center,#000 50%,transparent 50%) 0 50%/16px 200px;
    animation:change 3s linear infinite;
}

.box {
    border: 2px solid #000;
    background:#fff;
}

@keyframes change {
  from {
    background-position:0 50%;
  }
  to {
    background-position:32px 50%;
  }
}
<div class="container">
    <div class="box">
        <p>Box 1</p>
    </div>
    <div class="box">
        <p>Box 2</p>
    </div>

    <div class="box">
        <p>Box 3</p>
    </div>
</div>

In case you need transparency and you will only have 3 boxes you can consider pseuo element like below:

.container {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(100%/5) calc(100%/5) calc(100%/5);
  grid-gap: calc(100%/5);
  position:relative;
}

.container::before,
.container::after {
  content: "";
  position:absolute;
  top: 0;
  bottom: 0;
  width: calc(100%/5);
  background: 
   radial-gradient(8px 4px at center, #000 50%, transparent 50%) 0 50%/16px 200px;
  animation: change 3s linear infinite;
}
.container::before {
  left:calc(100%/5);
}
.container::after {
  right:calc(100%/5);
}

.box {
  border: 2px solid #000;
}
body {
  background:pink;
}
@keyframes change {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 32px 50%;
  }
}
<div class="container">
  <div class="box">
    <p>Box 1</p>
  </div>
  <div class="box">
    <p>Box 2</p>
  </div>

  <div class="box">
    <p>Box 3</p>
  </div>
</div>

Upvotes: 1

Related Questions