Arc browser logo

svg { 
  viewBox: -291 -191 600 600 p 20;
  
  --arc(from, to): @arc(r: 192; from: $from; to: $to);
  --left: M 0 -39 L -138 257;
  --right: M 0 -39 L 138 257;
  --dark: M -96 167 L -138 257;

  fill: none;
  stroke-width: 100;
  stroke-linecap: round;

  path { d: $arc(7, 154) $left $right; stroke: #fff; stroke-width: 156 }

  path { d: $left; stroke: #f56870 }
  path { d: $dark; stroke: #201cae }
  path { d: $arc(60, 154); stroke: #1850ef }
  path { d: $arc(7, 60); stroke: #ff9b99 }
  path { d: $right; stroke: #f56870 }

  g {
    clip-path: clipPath { 
      path { d: @arc(r: 242) @arc(r: 142); clip-rule: evenodd } 
    }
    path { d: $left; stroke: #033ce5 }
    path { d: $right; stroke: #eb5f6c; }
  }
}