<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js