Develop Reference

Add a tick selected css

.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.

One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>

Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>

Add border around svg sitemap

What do i have to do to get a border around my sitemap?
I have made a sitemap and i'd like to add a border around the elements just to give it a bit more character and less bland.
<style>
#svgJS g:hover polyline,
#svgJS g:hover line {
fill: none;
stroke-width: 2;
stroke: black;
}
#svgJS g:hover g text,
#svgJS g:hover text {
font-weight: bold;
}
#svgJS g:hover polygon,
#svgJS g:hover rect,
#svgJS g:focus polygon,
#svgJS g:focus rect {
fill: pink;
stroke: blue;
stroke-width: 2;
}
h1 {
font-family: sans-serif;
<!--text-align: centre;-->
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #0000FF;
}
a:hover {
color: grey;
}
a:
.container {
margin: auto;
}
header {
position: sticky;
top: 0;
}
</style>
<svg style="text-align:center" id="svgJS" height="1920" width="1280">
<g id="GROUPONE">
<rect x="375" y="10" height="50" width="150"
stroke="#0000FF" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="41"
font-family="Sans-Serif" text-anchor="middle">
Main Page</text>
</g>
<g id="groupId2">
<line id="shapeId2" stroke="#0000FF" stroke-width="2"
x1="450" y1="60" x2="450" y2="110"></line>
<polyline points="455, 105 450, 110 445, 105"
stroke="#0000FF" stroke-width="2" fill="none" />
</g>
<g id="groupId3" >
<rect x="375" y="110" height="50"
width="150" stroke="#0000FF" fill="none"
stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="141"
font-family="Sans-Serif" text-anchor="middle">
Query form</text></g>

you can wrap your svg with a div tag and give it a border with CSS
<div class='myClassName'>
<SVG/>
<div>
then on your CSS
.myClassName {
border: 2px solid black;
}

I'm not sure what you're really looking for but I hope this answers your question.
Simply apply border style to the svg. like so:
/* ADDED THIS LINE */
svg {
border: 1px solid #ff0000
}
#svgJS g:hover polyline,
#svgJS g:hover line {
fill: none;
stroke-width: 2;
stroke: black;
}
#svgJS g:hover g text,
#svgJS g:hover text {
font-weight: bold;
}
#svgJS g:hover polygon,
#svgJS g:hover rect,
#svgJS g:focus polygon,
#svgJS g:focus rect {
fill: pink;
stroke: blue;
stroke-width: 2;
}
h1 {
font-family: sans-serif;
<!--text-align: centre;
-->
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #0000FF;
}
a:hover {
color: grey;
}
a: .container {
margin: auto;
}
header {
position: sticky;
top: 0;
}
<svg style="text-align:center" id="svgJS" height="1920" width="1280">
<g id="GROUPONE">
<rect x="375" y="10" height="50" width="150"
stroke="#0000FF" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="41"
font-family="Sans-Serif" text-anchor="middle">
Main Page</text>
</g>
<g id="groupId2">
<line id="shapeId2" stroke="#0000FF" stroke-width="2"
x1="450" y1="60" x2="450" y2="110"></line>
<polyline points="455, 105 450, 110 445, 105"
stroke="#0000FF" stroke-width="2" fill="none" />
</g>
<g id="groupId3" >
<rect x="375" y="110" height="50"
width="150" stroke="#0000FF" fill="none"
stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="141"
font-family="Sans-Serif" text-anchor="middle">
Query form</text></g>

Setting opacity to svg path elements based on the keyframe animation state

I'm trying to set an opacity of 1 to the lines that I have in a gauge component, here's a link to the code: https://codepen.io/SergiuT/pen/RwgmOqw
Here's the code:
<svg width="244" height="126" viewBox="0 0 244 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="236" height="122">
<rect x="4.97656" width="234.175" height="122" fill="url(#paint0_linear)" />
</mask>
<g mask="url(#mask0)">
<circle cx="122" cy="125.5" r="115" fill="url(#paint1_radial)" />
</g>
<path id="line1" opacity="0.5" d="M22.5763 57.2082C10.2411 75.2339 2.76131 96.7911 2 120.032" stroke="#75FCC6" stroke-width="4"
stroke-linecap="round" />
<path id="line2" opacity="0.5" d="M81.134 11.9933C59.6579 19.7007 41.0318 33.3096 27.248 50.8443" stroke="#75FCC6"
stroke-width="4" stroke-linecap="round" />
<path id="line3" opacity="0.5" d="M88.6836 9.56243C99.262 6.53918 110.44 4.91934 122 4.91934C133.56 4.91934 144.738 6.53919 155.317 9.56245"
stroke="#979797" stroke-width="4" stroke-linecap="round" />
<path id="line4" opacity="0.5" d="M162.867 11.9933C184.343 19.7007 202.969 33.3096 216.753 50.8443" stroke="#FBE850"
stroke-width="4" stroke-linecap="round" />
<path id="line5" opacity="0.5" d="M221.424 57.2082C233.759 75.2339 241.239 96.791 242 120.032" stroke="#FBE850" stroke-width="4"
stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear" x1="122.064" y1="58.5794" x2="122.064" y2="122"
gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(122 125.5) rotate(90) scale(115)">
<stop offset="0.765625" stop-color="#75FCC6" stop-opacity="0" />
<stop offset="1" stop-color="#75FCC6" stop-opacity="0.33" />
</radialGradient>
</defs>
</svg>
<div class="indicator">
<div class="wrapper">
<div class="line"></div>
</div>
</div>
.indicator {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: absolute;
top: 45%;
margin: 0 10px;
#keyframes go {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(150deg);
}
}
.wrapper {
width: 100px;
position: absolute;
left: 1%;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards !important ;
transform-origin: bottom right;
animation: go 2s ease-in;
.line {
display: inline-block;
width: 85px;
border-radius: 2px;
border: 1px solid white;
height: 0;
}
}
}
Edit: The lines shine based on the value of the rotate() from .wrapper
Example: I can pass in 150deg to rotate, or 30deg, or 80deg. So I'm not going to pass all the lines everytime

Put an id="svg" to your svg. Then find the animations shine 1 to 5.
body {
background: black
}
.indicator {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: absolute;
top: 45%;
margin: 0 10px;
}
#keyframes go {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(150deg);
}
}
.wrapper {
width: 100px;
position: absolute;
left: 1%;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards !important ;
transform-origin: bottom right;
animation: go 2s ease-in;
}
.wrapper .line {
display: inline-block;
width: 85px;
border-radius: 2px;
border: 1px solid white;
height: 0;
}
#svg #line1{
animation: shine1 2s ease-in;
}
#keyframes shine1 {
0% {
opacity: 1
}
20% {
opacity: 1
}
40% {
opacity: 0.5
}
60% {
opacity: 0.5
}
80% {
opacity: 0.5
}
100% {
opacity: 0.5
}
}
#svg #line2{
animation: shine2 2s ease-in;
}
#keyframes shine2 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 1
}
60% {
opacity: 1
}
80% {
opacity: 0.5
}
100% {
opacity: 0.5
}
}
#svg #line3{
animation: shine3 2s ease-in;
}
#keyframes shine3 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 0.5
}
60% {
opacity: 1
}
80% {
opacity: 1
}
100% {
opacity: 0.5
}
}
#svg #line4{
animation: shine4 2s ease-in;
}
#keyframes shine4 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 0.5
}
60% {
opacity: 0.5
}
80% {
opacity: 1
}
100% {
opacity: 1
}
}
#svg #line5{
animation: shine5 2s ease-in;
}
#keyframes shine5 {
0% {
opacity: 0.5
}
20% {
opacity: 0.5
}
40% {
opacity: 0.5
}
60% {
opacity: 0.5
}
80% {
opacity: 0.5
}
100% {
opacity: 1
}
}
<svg id="svg" width="244" height="126" viewBox="0 0 244 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="236" height="122">
<rect x="4.97656" width="234.175" height="122" fill="url(#paint0_linear)" />
</mask>
<g mask="url(#mask0)">
<circle cx="122" cy="125.5" r="115" fill="url(#paint1_radial)" />
</g>
<path id="line1" opacity="0.5" d="M22.5763 57.2082C10.2411 75.2339 2.76131 96.7911 2 120.032" stroke="#75FCC6" stroke-width="4"
stroke-linecap="round" />
<path id="line2" opacity="0.5" d="M81.134 11.9933C59.6579 19.7007 41.0318 33.3096 27.248 50.8443" stroke="#75FCC6"
stroke-width="4" stroke-linecap="round" />
<path id="line3" opacity="0.5" d="M88.6836 9.56243C99.262 6.53918 110.44 4.91934 122 4.91934C133.56 4.91934 144.738 6.53919 155.317 9.56245"
stroke="#979797" stroke-width="4" stroke-linecap="round" />
<path id="line4" opacity="0.5" d="M162.867 11.9933C184.343 19.7007 202.969 33.3096 216.753 50.8443" stroke="#FBE850"
stroke-width="4" stroke-linecap="round" />
<path id="line5" opacity="0.5" d="M221.424 57.2082C233.759 75.2339 241.239 96.791 242 120.032" stroke="#FBE850" stroke-width="4"
stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear" x1="122.064" y1="58.5794" x2="122.064" y2="122"
gradientUnits="userSpaceOnUse">
<stop />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(122 125.5) rotate(90) scale(115)">
<stop offset="0.765625" stop-color="#75FCC6" stop-opacity="0" />
<stop offset="1" stop-color="#75FCC6" stop-opacity="0.33" />
</radialGradient>
</defs>
</svg>
<div class="indicator">
<div class="wrapper">
<div class="line"></div>
</div>
</div>

Fade color in path tag

In HTML with SVG you can create a rect with fading color:
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
Now in my code I have a path like that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).

Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>

Rotate a SVG hamburger icon into an X?

I've designed a 3-bar icon using pure SVG code in HTML. I'm using CSS3 transforms to rotate the top & bottom bars into an X shape. The problem is that they rotate around their own center, but I need them rotating around the icon's center. To get around this I've adjusted their X/Y coordinates.
This causes a LOT of buggy issues with Internet Explorer, Firefox, & Safari. Chrome seems to be alright but obviously I'd like to code this the "right" way so it'll work in all browsers.
Here's my live CodePen
HTML
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/>
</g>
</svg>
CSS
.hamburger { display:block; text-align:center; }
svg { cursor:pointer; }
.frstbar, .scndbar, .thrdbar {
-webkit-transition: all 0.35s linear;
-moz-transition: all 0.35s linear;
-o-transition: all 0.35s linear;
transition: all 0.35s linear;
}
#burgericon.open .frstbar {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#burgericon.open .scndbar { width: 0; opacity: 0; }
JS
$('#burgericon').on('click', function(e) {
if($(this).attr('class') != "open") {
$(this).attr('class','open');
$('.frstbar').attr('x','25').attr('y','-5');
$('.thrdbar').attr('x','-35').attr('y','55');
}
else {
$(this).attr('class','default');
$('.frstbar').attr('x','10').attr('y','10');
$('.thrdbar').attr('x','10').attr('y','60');
}
});
I also think changing the X/Y coords is causing a blurry effect. I've added a screenshot below. First you'll see the completed X icon and then you'll see how it looks when animated back to default.
The bars aren't perfectly straight but instead they look crooked for some reason.
Screenshot here
I'm still new to SVG manipulation so I'm not sure how to properly rotate <rect> elements with CSS3/JS. Any help or tips in the right direction would be more than appreciated.

You can remove the JS positioning by using the CSS transform-origin property. You can set it on the left of the first and second bars with transform-origin: 0 50%;.
This way they will cross each other when they are rotated :
document.getElementById('burgericon').addEventListener('click', function (e) {
this.classList.toggle('open');
});
.hamburger {
display: block;
text-align: center;
}
svg {
cursor: pointer;
}
.frstbar,.scndbar,.thrdbar {
transition: all 0.35s linear;
transform: rotate(0deg);
transform-origin: 0% 50%;
}
#burgericon.open .frstbar {
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
transform: rotate(-45deg);
}
#burgericon.open .scndbar {
width: 0;
opacity: 0;
}
<nav class="hamburger">
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141" />
</g>
</svg>
</nav>
<div>
</div>
Credits to David Thomas for the JS
Note that the transform-origin property needs the same vendor prefixes as the transform property. I have omited them for both in the above snippet

CSS
Using css transform: rotate() I rotated the elements so they form the X
Using css opacity and transitions; made the object gradually go transparent.
.icon {
stroke: none;
fill: #777;
}
.icon .frstbar {
transform-origin: 10% 50%;
transition: transform 1s;
}
.icon:hover .frstbar {
transform: rotate(45deg);
}
.icon .thrdbar {
transform-origin: 10% 50%;
transition: transform 1s;
}
.icon:hover .thrdbar {
transform: rotate(-45deg);
}
.scndbar {
opacity: 1;
transition: opacity 1s;
}
.icon:hover .scndbar {
opacity: 0;
}
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 100 100">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="90" height="12" rx="7" ry="7" />
<rect class="scndbar" x="10" y="35" width="90" height="12" rx="7" ry="7" />
<rect class="thrdbar" x="10" y="60" width="90" height="12" rx="7" ry="7" />
</g>
</svg>