Make sun rays figure using css3 - css

Question

Please I want to know how to make something similar to sunrise using css3.
Below is a sample.

Answer 1

This article (though it talks about animating the rays also) decribes making a suburst pattern http://designrshub.com/2013/01/css3-keyframe-animations.html.
But, I would use an svg image. See Is Starburst effect doable in CSS3?
the SVG:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Burst</title>
<defs>
<g id="burst">
<g id="quad">
<path id="ray" d="M0,0 -69,-500 69,-500 z" />
<use xlink:href="#ray" transform="rotate(30)"/>
<use xlink:href="#ray" transform="rotate(60)"/>
<use xlink:href="#ray" transform="rotate(90)"/>
</g>
<use xlink:href="#quad" transform="rotate(120)"/>
<use xlink:href="#quad" transform="rotate(240)"/>
</g>
<radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.65"/>
<stop offset="100%" stop-color="black" stop-opacity="0.65"/>
</radialGradient>
<!-- a circle mask -->
<mask id="m"><circle r="256" fill="white"/></mask>
</defs>
<!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
<g mask="url(#m)" transform="scale(1, 0.75)">
<use xlink:href="#burst" fill="lightslateblue"/>
<use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
<circle r="360px" fill="url(#grad)" />
</g>
</svg>

Answer 2

Yes, it is possible.
Working demo: https://codepen.io/lethargic/full/RRYdxX
I've written a vanilla CSS version as well as a Sass mixin at github.com/pestbarn/starburst.css.
Cross-browser?
As far as I can tell, yes. Needs testing in IE versions below 11, but seems well supported otherwise (full browser support as of 2019).
Animatable?
Yep, like you would animate any other elements.
Caveats?
Alas, there is. Using colors that are far from another on the color wheel will create jagged edges. I'd recommend using colors that are close to one another.
Also, since the effect is created using pseudo elements, you will in some cases need to explicitly set the element's height and width.
Using the Sass mixin, you can simply do the following:
#include starburst(both, 11, #184256, #194052);
This will create a starburst/sunburst effect with the colors you asked for, with the bursts being 11 degrees apart (smaller number = tighter burst).