Почему градиент с переходом в прозрачный цвет создаёт черноту?

Есть два градиентных круга, в одном я переход делаю к прозрачному цвету transparent, в другом к тому же цвету, что и фон pink
Я ожидал что результат будет одинаковый, а он разный, более того, если присмотреться то при переходе в прозрачный цвет наблюдается чернота. Почему так?
Что мне надо.
Я хочу сгенерировать фон из цветных пятен-кругов, которые градиентно исчезают.
Но если я делаю переход в transparent то там куча черноты получается, что мне не подходит. А выбрать фиксированный цвет куда переходит градиент я не могу, так как пятна генерируются на случайном месте, и в случае фиксированного крайнего цвета они будут перекрывать друг друга, что можно посмотреть на втором блоке примера, а мне надо что бы они просвечивали. На первом блоке они просвечивают, но там появилась чернота.
Как это можно сделать и можно ли вообще?

Ответ

Это можно исправить с помощью stop-opacity Color transparent меняем на blue, а дальше контролируем прозрачность с помощью stop-opacity
svg { background-color: pink; }