<svg class="förstoringsglas" width="100" height="100" viewBox="0 0 100
            100" onclick="this.classList.toggle('active')">
          <circle class="yttre" r="27.5" cy="54.200001" cx="45.700001" id="path947" />
          <path class="linje" d="M 37.240349,46.733243 72.551185,81.414382" />

          <rect class="klipp" x="0" y="0" width="100" height="100" />
        </svg>
body {
  align-items: center;
  background-color: #272c38;
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
.förstoringsglas {
  cursor: pointer;
}
.yttre {
  fill: #fff;
  stroke-width: 4;
  stroke-linecap: round;
}
.klipp {
  clip-path: polygon(
    30.85076% 68.94924%,
    29.40918% 67.354326%,
    28.1598% 65.654916%,
    27.10264% 63.865937%,
    26.23769% 62.002318%,
    25.56495% 60.078986%,
    25.08442% 58.11087%,
    24.79611% 56.112898%,
    24.7% 54.099998%,
    24.79611% 52.087098%,
    25.08442% 50.089126%,
    25.56495% 48.12101%,
    26.23769% 46.197678%,
    27.10264% 44.334059%,
    28.1598% 42.54508%,
    29.40918% 40.84567%,
    30.85076% 39.250756%,
    32.44567% 37.809172%,
    34.14508% 36.5598%,
    35.93406% 35.502638%,
    37.79768% 34.637688%,
    39.72101% 33.964949%,
    41.68913% 33.484421%,
    43.6871% 33.196105%,
    45.7% 33.099995%,
    47.7129% 33.196105%,
    49.71087% 33.484421%,
    51.67899% 33.964949%,
    53.60232% 34.637688%,
    55.46594% 35.502638%,
    57.25492% 36.5598%,
    58.95433% 37.809172%,
    60.54924% 39.250756%,
    61.99083% 40.84567%,
    63.2402% 42.54508%,
    64.29736% 44.334059%,
    65.16231% 46.197678%,
    65.83505% 48.12101%,
    66.31558% 50.089126%,
    66.60389% 52.087098%,
    66.7% 54.099998%,
    66.60389% 56.112898%,
    66.31558% 58.11087%,
    65.83505% 60.078986%,
    65.16231% 62.002318%,
    64.29736% 63.865937%,
    63.2402% 65.654916%,
    61.99083% 67.354326%,
    60.54924% 68.94924%,
    58.95433% 70.390824%,
    57.25492% 71.640196%,
    55.46594% 72.697358%,
    53.60232% 73.562308%,
    51.67899% 74.235048%,
    49.71087% 74.715576%,
    47.7129% 75.003892%,
    45.7% 75.100002%,
    43.6871% 75.003892%,
    41.68913% 74.715576%,
    39.72101% 74.235048%,
    37.79768% 73.562308%,
    35.93406% 72.697358%,
    34.14508% 71.640196%,
    32.44567% 70.390824%
  );
  fill: #272c38;
  transition: clip-path 100ms 100ms;
}
.linje {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: none;
  stroke-dasharray: 10 50;
  stroke-dashoffset: 20px;
  transition: stroke-dasharray 200ms, stroke-dashoffset 200ms, stroke 200ms;
}
.active .klipp {
  clip-path: polygon(
    34.82501% 66.114485%,
    34.29531% 65.463007%,
    33.9973% 64.784116%,
    33.88133% 64.113035%,
    33.89776% 63.484985%,
    33.99695% 62.935189%,
    34.12926% 62.498869%,
    34.24505% 62.211247%,
    34.29468% 62.107546%,
    35.429% 60.965863%,
    36.56331% 59.82418%,
    37.69763% 58.682497%,
    38.83195% 57.540814%,
    39.96626% 56.399132%,
    41.10058% 55.257449%,
    42.2349% 54.115766%,
    43.36922% 52.974083%,
    44.47407% 51.876594%,
    45.57892% 50.779106%,
    46.68378% 49.681617%,
    47.78863% 48.584129%,
    48.89349% 47.48664%,
    49.99834% 46.389151%,
    51.1032% 45.291663%,
    52.20805% 44.194174%,
    52.30742% 44.107354%,
    52.58926% 43.897031%,
    53.02915% 43.63841%,
    53.6027% 43.406701%,
    54.2855% 43.277108%,
    55.05314% 43.324838%,
    55.88121% 43.625102%,
    56.74532% 44.253103%,
    57.43219% 45.065937%,
    57.793% 45.853487%,
    57.90003% 46.590141%,
    57.82554% 47.250288%,
    57.64181% 47.808319%,
    57.42109% 48.23862%,
    57.23566% 48.515583%,
    57.1578% 48.613593%,
    56.02348% 49.725813%,
    54.88916% 50.838033%,
    53.75484% 51.950253%,
    52.62053% 53.062474%,
    51.48621% 54.174694%,
    50.35189% 55.286914%,
    49.21757% 56.399134%,
    48.08326% 57.511354%,
    46.96367% 58.653037%,
    45.84409% 59.79472%,
    44.7245% 60.936402%,
    43.60491% 62.078085%,
    42.48533% 63.219768%,
    41.36574% 64.36145%,
    40.24616% 65.503133%,
    39.12657% 66.644816%,
    39.01416% 66.690496%,
    38.70273% 66.796709%,
    38.23106% 66.917189%,
    37.63787% 67.005679%,
    36.96193% 67.015909%,
    36.24197% 66.901627%,
    35.51675% 66.61657%
  );
  transition: clip-path 100ms;
}
.active .linje {
  stroke-dasharray: 24 50;
  stroke-dashoffset: 74px;
  stroke: #272c38;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.