Search code examples
htmlcsssvgcss-animationssvg-animate

SVG only 1 infinite line

I've been struggling for a few days now to get this done, but seem like i can't, so maybe some know what is wrong with it. I'm trying to make an infinite line around an svg, but i keep getting 2 of them everytime.

  .hex-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .hex-bg svg {
    width: 100%;
    height: 100%; 
  }
.hex-bg .color-stroke,
.hex-bg .outer-stroke {
  stroke: #3851df;
}
  .hex-bg .gradient-stop-color {
    stop-color: rgba(56, 81, 223, 0.7);
  }
   .img-wrap .hex-bg .color-fill-stroke {
    stroke-width: 5px;
  }
  
.img-wrap .hex-bg {
    -webkit-transform: translate(-48%, -77%);
    transform: translate(-48%, -77%);
    z-index: 0;
    left: 50%;
    top: 100%;
    z-index: 0;
  }
.img-wrap .hex-bg .outer-stroke {
    stroke-width: 5px;
    opacity: 1;
    stroke-dasharray: 250;
    -webkit-animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
    animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
}

@keyframes color-stroke-moving-data-v-7ec1d1c1 {
    to {
      stroke-dashoffset: 1000;
    }
  }
  
<div class="img-wrap">
<div class="hex-bg"> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500"><defs><clipPath id="clip-path"><rect class="cls-1 " x="-93.38" y="-36.03" width="899.19" height="564.52"/></clipPath><linearGradient id="Degradado_sin_nombre_3" x1="356.21" y1="46.62" x2="356.21" y2="423.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a35d11"/><stop offset="2" class="gradient-stop-color" stop-color="#3f3f51"/></linearGradient></defs><g class="cls-2"><g id="OBJECTS"><g class="cls-3"> 
                                        
<path class="cls-5 outer-stroke color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Zm2,359.36c-88.43.86-175.46-71.59-176.75-169.49-1.29-98.5,84.86-174.35,174.64-174.43C447.62,66.37,534,145,531.25,243.63,528.61,338.45,444.81,409.51,358.24,410.36Z"/></g></g></g></svg>
</div></div>

<style>.cls-1{fill:none;}.cls-2{isolation:isolate;}.cls-3{clip-path:url(#clip-path);}.cls-4{opacity:0.4;mix-blend-mode:multiply;}.cls-5{fill:url(#Degradado_sin_nombre_3);}</style>

Your advice is much appreciated. Thank you !

Solution

  • The path you are using is a path with a hole. This mean that you draw a circle and then, in order to "clip a hole" you draw another inner circle in the opposite direction.

    In order to get only one "infinite line" around the svg you need to remove the part drawing the hole, i.e change the d attribute from what you have to this M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Z

    I'm breaking the d attribute at the second m (move to) command.

    However if you want to keep the hole you will need to add a path for the line.

    .hex-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .hex-bg svg {
    width: 100%;
    height: 100%; 
  }
.hex-bg .color-stroke,
.hex-bg .outer-stroke {
  stroke: #3851df;
}
  .hex-bg .gradient-stop-color {
    stop-color: rgba(56, 81, 223, 0.7);
  }
   .img-wrap .hex-bg .color-fill-stroke {
    stroke-width: 5px;
  }
  
.img-wrap .hex-bg {
    -webkit-transform: translate(-48%, -77%);
    transform: translate(-48%, -77%);
    z-index: 0;
    left: 50%;
    top: 100%;
    z-index: 0;
  }
.img-wrap .hex-bg .outer-stroke {
    stroke-width: 5px;
    opacity: 1;
    stroke-dasharray: 250;
    -webkit-animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
    animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
}

@keyframes color-stroke-moving-data-v-7ec1d1c1 {
    to {
      stroke-dashoffset: 1000;
    }
  }
    <div class="img-wrap">
<div class="hex-bg"> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500"><defs><clipPath id="clip-path"><rect class="cls-1 " x="-93.38" y="-36.03" width="899.19" height="564.52"/></clipPath><linearGradient id="Degradado_sin_nombre_3" x1="356.21" y1="46.62" x2="356.21" y2="423.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a35d11"/><stop offset="2" class="gradient-stop-color" stop-color="#3f3f51"/></linearGradient></defs><g class="cls-2"><g id="OBJECTS"><g class="cls-3"> 



<path id="kk" class="outer-stroke color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Z" fill="none"/>
<path class="cls-5 color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Zm2,359.36c-88.43.86-175.46-71.59-176.75-169.49-1.29-98.5,84.86-174.35,174.64-174.43C447.62,66.37,534,145,531.25,243.63,528.61,338.45,444.81,409.51,358.24,410.36Z"/></g></g></g></svg>
</div></div>

<style>.cls-1{fill:none;}.cls-2{isolation:isolate;}.cls-3{clip-path:url(#clip-path);}.cls-4{opacity:0.4;mix-blend-mode:multiply;}.cls-5{fill:url(#Degradado_sin_nombre_3);}</style>

    UPDATE

    the OP is commenting:

    how can i get the line to run continuously without interruption, as you can see there is a gap on top and the lines are cuted.

    In this case you need to use different values for stroke-dasharray and stroke-dashoffset. You can use stroke-dashoffset: 1188.557; where 1188.557 is the total lengrh of the .outer-stroke. For the stroke-dasharray I'm using stroke-dasharray: 148.57; where 148.57 is 1188.557 / 8. This will give you 4 strokes and 4 gaps with a total length equal to the length of the path.

    In order to know the length of the path I've used the getTotalLength() method.

    svg {
    width: 100%;
    height: 100%; 
  }
.color-stroke,
.outer-stroke {
  stroke: #3851df;
}
.gradient-stop-color {
    stop-color: rgba(56, 81, 223, 0.7);
  }
.color-fill-stroke {
    stroke-width: 5px;
  }
.outer-stroke {
    stroke-width: 5px;
    opacity: 1;
    stroke-dasharray: 148.57;
    animation: color-stroke-moving-data-v-7ec1d1c1 5s infinite linear;
}

@keyframes color-stroke-moving-data-v-7ec1d1c1 {
    to {
      stroke-dashoffset: 1188.557;
    }
  }

.cls-5{fill:url(#Degradado_sin_nombre_3);}
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500">
  <defs>
    <clipPath id="clip-path"><rect class="cls-1 " x="-93.38" y="-36.03" width="899.19" height="564.52"/></clipPath>
    <linearGradient id="Degradado_sin_nombre_3" x1="356.21" y1="46.62" x2="356.21" y2="423.32" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#a35d11"/>
      <stop offset="2" class="gradient-stop-color" stop-color="#3f3f51"/></linearGradient>   
  </defs>
  <g class="cls-2">
    <g id="OBJECTS">
      <g class="cls-3"> 
<path id="stroke" class="outer-stroke color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Z" fill="none"/>
<path class="cls-5 color-fill-stroke" d="M356.21,51c-105.39,0-190.82,83.93-190.82,187.46s85.43,187.46,190.82,187.46S547,342,547,238.46,461.6,51,356.21,51Zm2,359.36c-88.43.86-175.46-71.59-176.75-169.49-1.29-98.5,84.86-174.35,174.64-174.43C447.62,66.37,534,145,531.25,243.63,528.61,338.45,444.81,409.51,358.24,410.36Z"/></g></g></g></svg>