Я делаю генератор градиентов, который создает градиенты в формате SVG, чтобы пользователи могли открывать их в Adobe Illustrator, их браузере и т. Д. c. Вот пример конического градиента, который я сгенерировал: 
Вот код для этого (он очень длинный) https://codepen.io/HexylCinnamal/pen/QWwPWBy
Как видите, между каждым клином есть маленькие белые линии. Вся основа этого конического градиента состоит в создании диаграммы ap ie, содержащей до 360 элементов. Из-за характера программы, которую я пишу, я не могу использовать CSS или JS. Я не уверен, что я должен сделать, чтобы убрать эти крошечные белые линии, и если есть что-то, что я могу сделать. Я искал в Интернете, но трудно найти что-либо, имеющее отношение к этой топи c, так как это довольно странно. Я заметил, что если я использую небольшое количество клиньев, например 15, эти строки не появляются. Вот пример: https://codepen.io/HexylCinnamal/pen/oNgONPM
<?xml version="1.0" encoding="UTF-8"?>
<svg height="100%" viewBox="0 0 20 20" width="100%" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(3.0000000000, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="0" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(15.8571428571, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="4.186667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(28.7142857142, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="6.280000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(41.5714285713, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="8.373333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(54.4285714284, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="10.466667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(67.2857142855, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="12.560000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(80.1428571426, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="14.653333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(92.9999999997, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="16.746667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(105.8571428568, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="18.840000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(118.7142857139, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="20.933333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(131.5714285710, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="23.026667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(144.4285714281, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="25.120000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(157.2857142852, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="27.213333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(170.1428571423, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="29.306667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(182.9999999994, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="31.400000" stroke-width="10"/>
</svg>
Мне было интересно, есть ли проблема с методом, который я использую с приближениями, или есть какие-то скрытые приемы для сглаживания вещей? вне. Спасибо за чтение.