<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
<section>
<h1>Stroke Opacity</h1>
<div class="svg-wrapper">
<div class="svg-box stroke-opacity1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 97.6">
<circle cx="48.4" cy="48.9" r="45.7"/>
</svg>
<h2>1.0</h2>
</div>
<div class="svg-box stroke-opacity30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 97.6">
<circle cx="48.4" cy="48.9" r="45.7"/>
</svg>
<h2>0.3</h2>
</div>
</div>
</section>
html,body{
height:100%;
display: block;
}
body{
font-family: 'Comfortaa', cursive;
}
h1 {
text-align: center;
letter-spacing: 2px;
font-weight: 300;
font-size:40px;
}
svg{
width: 100px;
display:block;
margin:auto;
}
.svg-wrapper{
text-align:center;
}
.svg-box{
display:inline-block;
margin: 0px 20px;
}
.stroke-opacity1{
circle{
stroke-width:5px;
}
}
.stroke-opacity30{
circle{
stroke-width:5px;
stroke-opacity:0.3;
}
}
circle{
fill:#fb9e28;
stroke:#000;
}
View Compiled
This Pen doesn't use any external CSS resources.