Circle with drop-shadow example

by Ankit Patidar

HTML

<svg class="cc-chart" viewBox="0 0 36 36" style="width:300px;height:300px;">
  <path class="cc-bg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
  <path class="cc-fill" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
</svg>

<svg class="cc-chart" viewBox="0 0 36 36" style="width:300px;height:300px;">
  <path class="cc-bg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
  <path class="cc-fill-1" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
</svg>


<hr>




<style type="text/css">
  .cc-chart path{fill:none;stroke-width:3;transition:stroke-dasharray 1s linear}
  .cc-fill{stroke:red;stroke-dasharray:50, 100}
  .cc-bg{stroke:gray;stroke-dasharray:100, 100}
</style>

<svg class="cc-chart" viewBox="0 0 36 36" style="width:200px;height:190px;">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="0" stdDeviation="1.5" flood-color="#2071f7"/>
    </filter>
  </defs>
  <path class="cc-bg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
  <path class="cc-fill" style="filter:url(#shadow);" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
</svg>

<svg class="cc-chart" viewBox="0 0 90 90" style="width:200px;height:190px;">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="10" dy="10" stdDeviation="8" flood-color="#2071f7"/>
    </filter>
  </defs>
  <path class="cc-bg" d='M20,50 s30,0 60,0'/>
  <path class="cc-fill" style="filter:url(#shadow);" d='M20,50 s30,-50 60,0'/>
</svg>


<hr>

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80">
  <defs>
    <filter id="dropShadow" width="120" height="80">
      <feDropShadow dx="0" dy="0" stdDeviation="4"></feDropShadow>
    </filter>
  </defs>
  <g>
    <circle r="5" cx="0" cy="0" visibility="hidden"></circle>
    <path d="M100,50 L15,50" stroke-width="10" stroke="#ccc" fill="#000000"...

CSS

/*  body {
 background:#fff;
  padding: 20px;
 } 
 
 .cc-chart path{fill:none;stroke-width:0.8;transition:stroke-dasharray 1s linear}
 .cc-bg{stroke:#585d86;stroke-dasharray:100, 100}
 .cc-fill{stroke:#fff;stroke-dasharray:50, 100;stroke-linecap:round;
  filter: drop-shadow( 0.2px 0.2px 0.8px #2071f7);
 }
 
 .cc-fill-1{stroke:#ffb700;stroke-dasharray:50, 100;stroke-linecap:round;
  filter: drop-shadow( 0.2px 0.2px 0.8px #894259);
 } */