Yes in that same rule the last same named property will be the one that wins out (assuming it is valid).
(Of course if the rule was in another style block and had more weight then specificity would come into play to decide which rule wins out.)
1 Like
On here you can see the tracing of the svg:
Is that a color element I would change to do that?
I was trying to figure out how to do that:
I can’t seem to figure out how that is done.
Hi there asasass,
the color that you find so illusive may be found here…
path {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
coothead
I’m referring to the shadow, or whatever this would be called:
Not the teal color, the tracing it goes over.
How would I reproduce that?
How is that done?
Hi there asasass,
I am using Firefox 62.0.3 and I don’t see any shadow. 
I even changed the background to white to make sure. 
Could it be an optical illusion, perhaps? 
coothead
It can be found on here, sorry.
Is that something that can be replicated?
But I’m not sure how they were able to do it.
Hi there asasass,
Here you go - ( two identical paths )…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#triangle {
display: block;
padding:0.5em;
margin: auto;
background-color: #20007d;
}
#triangle path:first-of-type {
fill: none;
stroke: #446;
stroke-miterlimit: 10;
stroke-width: 4px;
}
#triangle path:last-of-type {
fill: none;
stroke-miterlimit: 10;
stroke-width: 4px;
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg
id="triangle"
xmlns="http://www.w3.org/2000/svg"
width="80"
height="80"
viewBox="0 0 48 52">
<g>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
</g>
</svg>
</body>
</html>
coothead
2 Likes
oh, ok. I guess that’s how that would be done then.
thanks.
No guessing, just simple SVG logic.
I thought that you would be an expert in svg by now.
Your problems with it, certainly helped improved my expertise. 
coothead
3 Likes
I’m still mystified because it’s not set up exactly how yours is.
For example,
They don’t use:
first-of-type or, last-of-type
I got this far:
I tried this:
.play svg path {
stroke: red;
opacity: 0.3;
}
<div class="play">
<svg class="coversvg" viewBox="0 0 47.96 51.66">
<title>Open</title>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
</svg>
</div>
Hi there asasass,
it is not an exact science, ’ there is always more than one way to skin a cat’
I could have given the path elements ids or classes, but I’ve always had a
preference for keeping the HTML as light as possible.
coothead
The way I just tried, how would it have been done like that?
The post above yours.
.play svg path {
stroke: red;
opacity: 0.3;
}
<div class="play"></div>
Hi there asasass,
there has to be, one way or another, two identical paths.
The first will be covered exactly by the second.
<g>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
</g>
The first is exposed as the second is animated.
coothead
1 Like
.play svg path {
stroke: red;
opacity: 0.3;
}
.jacketa .coversvg path {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
<div class="play">
<svg class="coversvg" viewBox="0 0 47.96 51.66">
<g>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
</g></svg>
</div>
</div>
Hi there asasass,
I am just about to retire for the night, so I
will break the habit of a life time before go…
https://jsfiddle.net/vd9bcLx1/15/
coothead
1 Like
Thank you.
No problem, you’re very welcome.
Over and out.
coothead
1 Like
I didn’t realize there’s both a front and back, I’m going to take a look at this later.
It works like this too.
.back svg path {
stroke: red;
opacity: 0.3;
}
<div class="back">
<svg class="coversvg" viewBox="0 0 47.96 51.66">
<title>Open</title>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
<path id="front"d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
</svg>
</div>
</div>
How would I replicate an SVG animation on a border line?
border: