<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="svg">
  <circle cx="12" cy="12" r="10" class="circle--1" />
  <circle cx="20" cy="20" r="10" class="circle--2" />
  <!-- <defs>は使用したい効果を定義できる(呼び出されるまで実行しない) -->
  <!-- blur 1 -->
  <defs>
    <filter id="blur1">
      <feGaussianBlur in="SourceGraphics" stdDeviation="1" />
    </filter>
  </defs>
  <!-- blur 2 -->
  <defs>
    <filter id="blur2">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
    </filter>
  </defs>
  <!-- blend -->
  <defs>
    <filter id="blend">
      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1" />
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
    </filter>
  </defs>
  <!-- colormatrix -->
  <defs>
    <filter id="colormatrix--1">
      <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 .2 0 0 0 1 1 0 0 0 0 .2 0" />
    </filter>
  </defs>
  <!-- transfer -->
  <defs>
    <filter id="transfer" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
        <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
        <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <!-- turbulence -->
  <defs>
    <filter id="turbulence" x="0" y="0" width="100%" height="100%">
      <feTurbulence baseFrequency="0.05" numOctaves="3" result="B" />
    </filter>
  </defs>
  <!-- composit -->
  <defs>
    <filter id="composit" x="0" y="0" width="100%" height="100%">
      <!-- filterは複数反映可能 -->
      <feTurbulence baseFrequency="0.05" numOctaves="3" result="B" />
      <feComposite in2="B" in="SourceGraphic" operator="in" />
    </filter>
  </defs>
  <!-- turbulence -->
  <defs>
    <filter id="turbulence" x="0" y="0" width="100%" height="100%">
      <feTurbulence baseFrequency="0.05" numOctaves="3" result="B" />
    </filter>
  </defs>
  <!-- light 1(全体) -->
  <defs>
    <filter id="light--1" x="0" y="0" width="100%" height="100%">
      <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
        <feDistantLight azimuth="1" elevation="10" />
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <!-- light 2(ポイント1) -->
  <defs>
    <filter id="light--2" x="0" y="0" width="100%" height="100%">
      <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
        <fePointLight x="15" y="6" z="4" />
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <!-- light 3(ポイント2) -->
  <defs>
    <filter id="light--3" x="0" y="0" width="100%" height="100%">
      <feSpecularLighting result="spotlight" specularConstant="1.5" specularExponent="80" lighting-color="#FFF">
        <fePointLight x="6" y="6" z="20" />
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
    </filter>
  </defs>
  <!-- light 3(ポイント2) -->
  <defs>
    <filter id="light--3" x="0" y="0" width="100%" height="100%">
      <feSpecularLighting result="spotlight" specularConstant="1.5" specularExponent="80" lighting-color="#FFF">
        <fePointLight x="6" y="6" z="20" />
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
    </filter>
  </defs>
  <!-- light 4(スポットライト) -->
  <defs>
    <filter id="light--4" x="0" y="0" width="100%" height="100%">
      <feDiffuseLighting lighting-color="blue" surfaceScale="5">
        <feSpotLight x="-10" y="-10" z="10" pointsAtX="20" pointsAtY="20" pointsAtZ="0" limitingConeAngle="20" specularExponent="1" />
      </feDiffuseLighting>
    </filter>
  </defs>
  <!-- offset(ずらす) -->
  <defs>
    <filter id="offset" x="0" y="0" width="100%" height="100%">
      <feOffset dx="10" dy="10" />
    </filter>
  </defs>
</svg>
.svg {
  width: 50%;
  aspect-ratio: 1/1;
  .circle--1 {
    stroke: #000; // 線の色
    stroke-width: 1px; // 線の太さ
    fill: blue; // 塗りの色
    filter: url(#light--4); // filterの呼び出し
  }
  .circle--2 {
    stroke: #000; // 線の色
    stroke-width: 1px; // 線の太さ
    fill: green; // 塗りの色
    filter: url(#offset); // filterの呼び出し
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.