CODEWITHSUNDEEP
javascriptjquerycssanimationsvg
master Nixe
master Nixe

Reputation: 180

SVG line doesnt go full width

Somebody helped me create the webpage animation in the snippet, the problem is the lines are not full width, if you notice, after 5-10 seconds you can see the cut lines not going full width. any idea what could cause this as calculations seem ok. i have another version of the script which goes full width but is built in another way, in some browsers it allocates up to 10gb of ram :D so that was a no no and we built this version of the animation which is lighter. thank you in advance

window.onload = function () {
  document.querySelectorAll('.circle').forEach(function (circle, i) {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', "0 0 200 200");
    svg.setAttribute('preserveAspectRatio', "xMidYMid slice");

    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.id = 'line' + i;
    line.setAttribute('x1', "100");
    line.setAttribute('x2', "100");
    line.setAttribute('y1', "-300");
    line.setAttribute('y2', "300");
    svg.append(line);

    var s = parseInt(circle.getAttribute("data-step"));
    var end = 180 / s;
    for (var j = 1; j < end; j++) {
      var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
      use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#line' + i);
      use.setAttribute('transform', 'rotate(' + s * j + ', 100, 100)');
      svg.append(use);
    }
    circle.append(svg);
  });
}
body {
    overflow: hidden;
}

.circle {
  height: 100px;
  width: 100px;
  position:absolute;
}

.circle span {
  text-align:center;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  border-radius: 50%;
  background-color:white;
  margin:0px auto;
  position:absolute;
}
.circle span:hover {
    color:white;
    transition: all .5s;
}
.food{
    color:#0073b3;
}
.food:hover{
    background-color:#0073b3;
}

.line{
    color:#FBAF17;
}
.line:hover{
    background-color:#FBAF17;
}

.music{
    color:#F15E42;
}
.music:hover{
    background-color:#F15E42;
}
.air{
    color:#ED1C24;
}
.air:hover{
    background-color:#ED1C24;
}
.story{
    color:#3EA472;
}
.story:hover{
    background-color:#3EA472;
}

.circle-food span{
  width:220px;
  height:220px;
  left:-60%;
  top:-60%;
}
.circle-story span{
  width:350px;
  height:350px;
  left:-126%;
  top:-126%;
}
.circle-line span{
  width:300px;
  height:300px;
  left:-105px;
  top:-105px;
}

.circle-air span{
	width:125px;
	height:125px;
	top: -15px;
	left: -15px;
}

.circle-music span{
	width:225px;
	height:225px;
	top: -65px;
	left: -65px;
}

svg {
    opacity: 0.8;
    position: absolute;
    z-index: -1;
    left:calc(50% - 100vw);
    top:calc(50% - 100vh);
    width: 200vw;
    height: 200vh;
    animation: animate 90s infinite linear;
    transform-origin: center;
}
.circle-food svg {
    stroke: #0073B3;
}
.circle-line svg {
    stroke: #FBAF17;
}
.circle-music svg {
    stroke: #F15E42;
}
.circle-air svg {
    stroke: #ED1C24;
}
.circle-story svg {
    stroke: #3EA472;
}

line {
    stroke-width: 0.05;
}

@keyframes animate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
<div class="circle circle-food" style="left:30%;top:25%;" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>

<div class="circle circle-music" style="right:15%;top:20%;" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>

<div class="circle circle-air" style="right:15%;bottom:15%;" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>

<div class="circle circle-story" style="right:40%;bottom:40%" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>

Upvotes: 2

Views: 395

Answers (1)

Mario
Mario

Reputation: 968

it seems the width of your viewbox is too small, try to change the svg parameters in CSS:

svg {
    opacity: 0.8;
    position: absolute;
    z-index: -1;
    left: calc(50% - 200vw);
    top: calc(50% - 200vh);
    width: 400vw;
    height: 400vh;
    animation: animate 90s infinite linear;
    transform-origin: center;
}

Also on a smaller viewport it works.

When I start a project like a website I also start to build up from mobile to bigger viewports/devices, it's easier to scale. There are other things on mobile I'd consider changing with this, don't know your usecase and it was not part of the question.

Upvotes: 1

Related Questions