SVG lines full screen size - javascript

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.


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>


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.

Related

Selecting an element with same class names using css

I have this ugly generated code and I want to pick an element and add an additional attribute. I can only use CSS to do this. I tried a few things such as #CHART_1_control div:nth-of-type and nth-child but I seem to be getting lost with all the <g> classes. I'm also not sure if that's the direction I should be heading.
I'm trying to get to the last <g> class and change the three <rect> to include an additional attribute. Is that possible to do?
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
So here we change the fill color just using css on the last 3 rect
Full Code below:
.v-datapoint rect{
fill:blue;
}
<div id="CHART_1_control" style="width:353px;height:200px" class="zenControl">
<div class="uvb-vizframe-container">
<div style="width: 353px; height: 200px; visibility: visible; position: relative;">
<div class="viz-controls-chart-holder viz-controls-common-scrollable" style="position: relative; width: 353px; height: 200px;">
<div class="viz-controls-chart-layer" style="position: absolute; width: 353px; height: 200px; visibility: visible;">
<div id="UIComp_0" class="v-info" aria-labelledby="UIComp_0-title" tabindex="0" style="height: 100%; width: 100%; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;">
<svg class="v-m-root" focusable="false" tabIndex="-1" style="left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;">
<defs></defs>
<g class="v-m-desc-title">
<title id="UIComp_0-title">An Interactive Column Chart </title>
</g>
<g class="v-m-action-layer-group js-zen-nozoom"></g>
<g class="v-m-decoration-layer-group"></g>
<g class="v-m-background">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="353" height="200" style="fill:transparent"></rect>
</g>
<g class="v-m-title" transform="translate(48.34765625, 24)"></g>
<g class="v-m-legendGroup" transform="translate(329, 24)" role="listbox">
<g class="v-m-legend" transform="translate(0,0)">
<rect class="v-bound" width="0" height="0" visibility="hidden"></rect>
</g>
</g>
<g class="v-m-main" transform="translate(24, 24)">
<g class="v-m-plot" transform="translate(24.34765625, 0)">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="280.65234375" height="126.6" style="fill:transparent"></rect>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="280.65234375" y1="0" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="280.65234375" y2="0" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="126.6" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<clipPath id="plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732">
<rect y="-1" width="281.65234375" height="127.6"></rect>
</clipPath>
<rect class="v-plot-bound v-bound v-zoom-plot" width="280.65234375" height="126.6" fill="transparent"></rect>
<g clip-path="url(#plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732)">
<g class="v-plot-main" role="list" transform="translate(0, 0)">
<g class="v-gridline-group">
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="126.6" x2="280.65234375" y2="126.6"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="84.4" x2="280.65234375" y2="84.4"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="42.2" x2="280.65234375" y2="42.2"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="0" x2="280.65234375" y2="0"></line>
</g>
</g>
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
</g>
</g>
</g>

Position elements around a circular image

#absolute-canvas a {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
border-radius: 100%;
background: black;
}
.deg0 {
transform: translate(12em);
} /* 12em = half the width of the wrapper */
.deg45 {
transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
transform: translate(-12em);
}
.deg225 {
transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
transform: rotate(315deg) translate(12em) rotate(-315deg);
}
<section id="absolute-canvas">
<img src="./images/logoWithShadow.png" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
<div id="nav-container">
<a href='#' class='deg0'></a>
<a href='#' class='deg45'></a>
<a href='#' class='deg135'></a>
<a href='#' class='deg180'></a>
<a href='#' class='deg225'></a>
<a href='#' class='deg315'></a>
</div>
</section>
My current solution works however when the image scales down (decreases in size) I want to keep the circles around the same image. How can I accomplish this?
Image of what I'm trying to accomplish:
The central div is an image that's infact a circle.

Using SVG <circle> elements you can do this:
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
.circle--main {
color: #5E66FF;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke="currentColor" stroke-width="6" fill="currentColor" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
If you want to include an image, you can use a SVG pattern.
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 200 200">
<image x="0%" y="0%" width="200" height="200" xlink:href="http://placehold.it/200x200"></image>
</pattern>
</defs>
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke-width="6" fill="url(#image)" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
Have in mind that since you are using the same shape, instead of creating different elements you could create a SVG Spritesheet and reuse the circle shape with the <use> tag, only if there is no deeper manipulation for each circle element.

svg rect doesnt respond with another div fixed with a high z-index

I want to have the rectangles in the svg tag to show up and change opacity on hover. I had this whole code working, but after adding a fixed div with a high z-index, the svg no longer worked (The hover effect has worked briefly but not consistently so I know that the elements are still where they should be).
<style>
.hover_group:hover
{
opacity:1;
}
#projectsvg
{
position: relative;
width: 100%;
vertical-align: middle;
margin: 0;
overflow: hidden;
margin:10px;
}
#projectsvg svg
{
position: relative;
float: left;
top: 0;
left: -199;
}
</style>
<div class="row" style="background-image: url(../img/home/blue_bk.jpg);">
<div class="col-xs-1 col-sm-0"></div>
<div class="col-xs-10 col-sm-5 col-lg-4">
<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="500 -50 920 1180" preserveAspectRatio="xMinYMin meet" >
//set your background image
<image width="1920" height="1080" xlink:href="../img/home/pain_chart3.png">
</image>
<!-- Shoulder-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="762" y="130.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
<!-- Hand-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="762" y="300.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
<!-- knee-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="862" y="560.1" opacity="0.2" fill="#FFFFFF" width="180.6" height="80.8"></rect>
</a>
</g>
<!-- Elbow-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="1132" y="190.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
</svg>
</figure>
</div>
<div class="col-xs-12 col-sm-7 col-lg-8">
<h1>hello</h1>
</div>
</div>
Is there any way to fix the bug, or do I have to write the code manually?

make SVG as a timeline

i' m trying to make a circular timeline with SVG.
i m using a fullpage js
so i made a blue line working progressivly on scroll around the circle but now i want that my anchors dash array appears too but i can t find the solution, i want my anchors appear and stay when i scroll down ( like a timeline ) and come back to grey when scroll up
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>
my code :

Simply add an array which will contain each of your circles' id and change their css in the onleave event after looking for the object returned by the event :
var smallCircles= ['top','right','bottom','left','top'];
...
onLeave: function(...
if(direction=='up'){
$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');
}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
if(direction=='up'){$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright, #smallbluetop{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, smallbluetop:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>

svg animation on anchor

I'm trying to make a circular timeline with steps,
I am using a fullpage.js plugin that make every sections at 100% of the windows with body in overflow so actually have only 4 steps on scroll
so the steps have to be:
section1 -->stroke 0%
section2 -->stroke 25%
section3 -->stroke 50%
section4 -->stroke 75%
In the current code I use hover for show what the effect :
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
});
});
body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
font-family: 'source_sans_proextralight';
}
/********** timeline ************/
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,0.4);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#bluecircle:hover{
stroke-dashoffset:0;
}
#smallblueleft, #smallbluebottom, #smallblueright{
opacity:0;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
opacity:1;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!---------- timeline ----------->
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>
<a xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>
<a xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>
<a xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="don">
<h2></h2>
<p></p>
</div>
<div class="section" id="emploi">
<h2>fullPage.js</h2>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
<div class="section" id="section2">
<h2>Example</h2>
<p>HTML markup example to define 4 sections.</p>
</div>
<div class="section" id="section4">
<h2>Working On Tablets</h2>
<p>Designed to fit to different screen</p>
</div>
</div>

You can use the fullpage.js callback onleave(index, nextIndex, direction)
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)) );
}
However, I didn't find a way to get the anchors.length value, this would be better than hardcoded 4.
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
}
});
});
body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
font-family: 'source_sans_proextralight';
}
/********** timeline ************/
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,0.4);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright{
opacity:0;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
opacity:1;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!---------- timeline ----------->
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="don">
<h2></h2>
<p></p>
</div>
<div class="section" id="emploi">
<h2>fullPage.js</h2>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
<div class="section" id="section2">
<h2>Example</h2>
<p>HTML markup example to define 4 sections.</p>
</div>
<div class="section" id="section4">
<h2>Working On Tablets</h2>
<p>Designed to fit to different screen</p>
</div>
</div>

Categories