Cześć, wykonałem projekt w SVG kół olimpijskich.
<svg width="900" height="600" style="display: block; ">
<circle cx='420' cy='120' r='52' fill='transparent' stroke='red' stroke-width='11'/>
<circle cx='350' cy='100' r='52' fill='transparent' stroke='green' stroke-width='11'/>
<circle cx='300' cy='120' r='52' fill='transparent' stroke='black' stroke-width='11'/>
<circle cx='240' cy='172' r='52' fill='transparent' stroke='yellow' stroke-width='11'/>

Powyzej fragment kodu

Jednak koła muszą przez Siebie przenikac dla prawidlowego wygladu.
<path d='M352,167 A51, 51 0 0 1 370,134' fill='transparent' stroke='red' stroke-width='11'/>
<path d='M200,172 A51, 51 0 0 1 250,134' fill='transparent' stroke='black' stroke-width='11'/>
<path d='M256,224 A52, 52 0 0 1 325,134' fill='transparent' stroke='green' stroke-width='11'/>
<path d='M250,224 A52, 52 0 0 1 205,134' fill='transparent' stroke='yellow' stroke-width='11'/>
Zatrzymałem się na etapie w którym nie moge dopasować polozenia prawidlowego przenikania
Moglby ktos naprowadzic?

Jeśli chodzi Ci o efekt gdzie jedno koło jednocześnie jest nad i pod drugim kołem, to nie ma to związku z przenikaniem rozumianym w kontekście SVG.
Taki efekt możesz osiągnąć wyłącznie transformacjami, tj. obrócić lekko koło w osi X, ale w ten sposób się odkształci (spłaszczy się), więc musisz wtedy wyregulować kształt skalą w osi Y, aby wróciło do postaci okręgu.

Nie siedzę w grafice ale można podpatrzeć kod svg np. ze strony:
viki olimpic flag

Chyba, że chcesz sam to zrobić, to nie ma sprawy.