SVG线全屏尺寸

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

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> 

Answer 2

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.