Updating « Seigaiha » pattern

[AlainGourves]

Modify some stop-color percentages to correct gaps in the pattern.

Original pattern :

Modified pattern :

[LeaVerou]

Hi there, thanks for contributing! Which browser(s) did you notice the problem in and which did you test the fix in? Thank you!

[AlainGourves]

Hi ! I’ve experimented and tested with what I have on hand :

• Safari 12.1.12
• Chrome 76
• Firefox 68

These three on OSX Sierra. It’s also noticable with Chromium 56 on Raspbian Jessie.

Also, in your version there is a mix of « hard » and « smooth » transitions between colors :

• silver 24%, white 25% (« smooth »)
• silver 36%, white 36% (« hard »)

I’ve put hard transition everywhere, hence the pixelated aspect. I’ve found that smooth transitions are possible but can produce strange fringe effect in Safari.
Here’s a screen capture :

It’s possible to overcome that effect by replacing

white 71%, transparent 72%, transparent

by

white 71%, rgba(255, 255, 255, 0) 72%, transparent

The code for smooth transitions :

background-color:silver;
background-image:
        radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 37%, white 40%, rgba(255, 255, 255, 0) 41%, transparent),
        radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 37%, white 40%, rgba(255, 255, 255, 0) 41%, transparent),
        radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, rgba(255, 255, 255, 0) 72%, transparent),
        radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 29%, white 30%, white 34%, silver 35%, silver 44%, white 45%, white 49%, rgba(255, 255, 255, 0) 50%, transparent),
        radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 29%, white 30%, white 34%, silver 35%, silver 44%, white 45%, white 49%, rgba(255, 255, 255, 0) 50%, transparent);
background-size: 100px 50px;

Hope this helps, great patterns BTW !

[LeaVerou]

Thanks, merged!

Btw the "strange fringe effect" in Safari is because Safari doesn't yet perform interpolation in a premultiplied RGBA space, so it treats transparent as transparent black and transitions both the color and the opacity.