SVG lines full screen size

Question

im trying to achieve the image below:

The lines coming out of each circle rotate infinitely(not hard to achieve it through css keyframes) I tried doing this with 100s of divs and rotate 10degree each but failed to achieve my needs. so i thought about svg and i did something but it doesnt work as needed, the lines do not go fullscreen. fiddle above.

html,
body {
  overflow: hidden;
}

.fw {
  border-top: 1px red solid;
  width: 2000px;
}

.wrapper {
  overflow: hidden;
}

@-webkit-keyframes rotating
/* Safari and Chrome */

{
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.wrapper1 {
  display: inline-block;
  position: fixed;
  -webkit-animation: rotating 10s linear infinite;
  -moz-animation: rotating 10s linear infinite;
  -ms-animation: rotating 10s linear infinite;
  -o-animation: rotating 10s linear infinite;
  animation: rotating 10s linear infinite;
}

<div class="wrapper" style="position:absolute;top:20%;left:10%;width:100%;height:100%;">
  <div class="wrapper1">

    <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In  -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1097 1097" style="enable-background:new 0 0 1097 1097;"
      xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:red;stroke-miterlimit:10;}
	
</style>
<defs>
</defs>
<g>
	<g>
		<line class="st0" x1="551.5" y1="0" x2="551.5" y2="1097"/>
	</g>
	<g>
		<line class="st0" x1="1097" y1="555.5" x2="0" y2="555.5"/>
	</g>
	<g>
		<line class="st0" x1="935.6" y1="152.6" x2="179.7" y2="947.6"/>
	</g>
	<g>
		<line class="st0" x1="947.2" y1="931" x2="152.2" y2="175.1"/>
	</g>
	<g>
		<line class="st0" x1="755.6" y1="41.3" x2="351" y2="1060.9"/>
	</g>
	<g>
		<line class="st0" x1="1057.8" y1="755.8" x2="38.1" y2="351.2"/>
	</g>
	<g>
		<line class="st0" x1="1055.4" y1="323.4" x2="59.6" y2="783.6"/>
	</g>
	<g>
		<line class="st0" x1="781" y1="1051.6" x2="320.8" y2="55.8"/>
	</g>
	<g>
		<line class="st0" x1="456.7" y1="13.2" x2="646.2" y2="1093.7"/>
	</g>
	<g>
		<line class="st0" x1="1090" y1="466.2" x2="9.5" y2="655.6"/>
	</g>
	<g>
		<line class="st0" x1="861.4" y1="97.1" x2="254.2" y2="1010.8"/>
	</g>
	<g>
		<line class="st0" x1="1007.3" y1="861.9" x2="93.6" y2="254.7"/>
	</g>
	<g>
		<line class="st0" x1="664.9" y1="18.6" x2="442.5" y2="1092.8"/>
	</g>
	<g>
		<line class="st0" x1="1085.9" y1="670.2" x2="11.7" y2="447.8"/>
	</g>
	<g>
		<line class="st0" x1="1008.9" y1="244.7" x2="107.6" y2="870"/>
	</g>
	<g>
		<line class="st0" x1="864.4" y1="1009.4" x2="239.1" y2="108"/>
	</g>
</g>
</svg>
    <div style="position:fixed;top:50%;left:50%;margin:0px auto;display:block;text-align:center;   width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;">Support</div>

  </div>

</div>

it would be great if you could at least point me on some resources to achieve what i need. Thanks in advance.

Answer 1

My idea initially came from thinking about pseudo-elements, but since you can only have 2 per element (::before and ::after) that is never going to give you the result you want.

So (unfortunately) we'll have to use a lot of divs, but what I came up with requires the least amount of divs (if we're not using pseudo-elements) and is very easy to change if you want more or less lines, or more or less space in between the lines.

body,
html {
  height: 100%;
  margin: 0;
}

.wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.circle {
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 50%;
  background-color: red;
  animation: spin 20s linear infinite;
}

.line {
  height: 1500%;
  width: 1px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
  z-index: -1;
}

.line1{transform: rotate(0deg);}
.line2{transform: rotate(4deg);}
.line3{transform: rotate(8deg);}
.line4{transform: rotate(12deg);}
.line5{transform: rotate(16deg);}
.line6{transform: rotate(20deg);}
.line7{transform: rotate(24deg);}
.line8{transform: rotate(28deg);}
.line9{transform: rotate(32deg);}
.line10{transform: rotate(36deg);}
.line11{transform: rotate(40deg);}
.line12{transform: rotate(44deg);}
.line13{transform: rotate(48deg);}
.line14{transform: rotate(52deg);}
.line15{transform: rotate(56deg);}
.line16{transform: rotate(60deg);}
.line17{transform: rotate(64deg);}
.line18{transform: rotate(68deg);}
.line19{transform: rotate(72deg);}
.line20{transform: rotate(76deg);}
.line21{transform: rotate(80deg);}
.line22{transform: rotate(84deg);}
.line23{transform: rotate(88deg);}
.line24{transform: rotate(92deg);}
.line25{transform: rotate(96deg);}
.line26{transform: rotate(100deg);}
.line27{transform: rotate(104deg);}
.line28{transform: rotate(108deg);}
.line29{transform: rotate(112deg);}
.line30{transform: rotate(116deg);}
.line31{transform: rotate(120deg);}
.line32{transform: rotate(124deg);}
.line33{transform: rotate(128deg);}
.line34{transform: rotate(132deg);}
.line35{transform: rotate(136deg);}
.line36{transform: rotate(140deg);}
.line37{transform: rotate(144deg);}
.line38{transform: rotate(148deg);}
.line39{transform: rotate(152deg);}
.line40{transform: rotate(156deg);}
.line41{transform: rotate(160deg);}
.line42{transform: rotate(164deg);}
.line43{transform: rotate(168deg);}
.line44{transform: rotate(172deg);}
.line45{transform: rotate(176deg);}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="wrapper">
  <div class="circle">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div class="line line7"></div>
    <div class="line line8"></div>
    <div class="line line9"></div>
    <div class="line line10"></div>
    <div class="line line11"></div>
    <div class="line line12"></div>
    <div class="line line13"></div>
    <div class="line line14"></div>
    <div class="line line15"></div>
    <div class="line line16"></div>
    <div class="line line17"></div>
    <div class="line line18"></div>
    <div class="line line19"></div>
    <div class="line line20"></div>
    <div class="line line21"></div>
    <div class="line line22"></div>
    <div class="line line23"></div>
    <div class="line line24"></div>
    <div class="line line25"></div>
    <div class="line line26"></div>
    <div class="line line27"></div>
    <div class="line line28"></div>
    <div class="line line29"></div>
    <div class="line line30"></div>
    <div class="line line31"></div>
    <div class="line line32"></div>
    <div class="line line33"></div>
    <div class="line line34"></div>
    <div class="line line35"></div>
    <div class="line line36"></div>
    <div class="line line37"></div>
    <div class="line line38"></div>
    <div class="line line39"></div>
    <div class="line line40"></div>
    <div class="line line41"></div>
    <div class="line line42"></div>
    <div class="line line43"></div>
    <div class="line line44"></div>
    <div class="line line45"></div>
  </div>
</div>

To achieve this without writing every line manually I used the Text Pastry package for Sublime.

Answer 2

I would consider the circle as the main element and I would use a pseudo element that I fill with all these lines using rotated SVG background.

body {
 margin::0;
 overflow:hidden;
}

.circle {
  height:100px;
  width:100px;
  margin:50px;
  background:red;
  border-radius:50%;
  position:relative;
}
.circle:before {
    content:"";
    position:absolute;
    top:-5000%;
    left:-5000%;
    right:-5000%;
    bottom:-5000%;
    background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(20deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(40deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(60deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(80deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(100deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(120deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(140deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
    url('data:image/svg+xml,<svg style="transform:rotate(160deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>');
    background-size:100% 100%;
  animation:animate 6s infinite linear;
}

@keyframes animate {
  from {
    transform:rotate(0);
  }
  to {
    transform:rotate(360deg);
  }
}

<div class="circle">

</div>

And to make thing easier you may rely on JS to generate the code of the background:

var all = document.querySelectorAll('.circle');

for (var i = 0; i < all.length; i++) {
  var c = all[i].getAttribute("data-color");
  var s = parseInt(all[i].getAttribute("data-step"));
  var b = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
  var end = 180 / s;
  for (var j = 1; j < end; j++) {
    b += ',url(\'data:image/svg+xml,<svg style="transform:rotate(' + s * j + 'deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
  }
  all[i].style.setProperty("--b", b);
  all[i].querySelector('span').style.setProperty("background", c);

}

body {
  overflow: hidden;
}

.circle {
  height: 100px;
  width: 100px;
  position:absolute;
}
.circle span {
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  border-radius: 50%;
  color:#fff;
}

.circle:after {
  content: "";
  z-index: -1;
  position: absolute;
  top: -5000%;
  left: -5000%;
  right: -5000%;
  bottom: -5000%;
  background-image: var(--b);
  background-size: 100% 100%;
  animation: animate 10s infinite linear;
}

@keyframes animate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

<!-- step will define the degree between each line -->

<div class="circle" data-color="red" data-step="10">
<span>some text</span>
</div>
<div class="circle" style="top:150px;left:150px;" data-color="green" data-step="20">
<span>text</span>
</div>

<div class="circle" style="left:250px;" data-color="orange" data-step="30">
<span>more here</span>
</div>

<div class="circle" style="right:50px;bottom:50px" data-color="cyan" data-step="10">
<span>more here</span>
</div>