PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

First, I went to find a simple picture of fireworks and found that the main structure was distorted line structure.

Solution a:

Curved lines are the first response to “rounded edges” :

 

 

    width: 200px;
    height: 200px;
    border: rosybrown 100px solid;
    border-radius: 100px;
Copy the code

By controlling the size of the rounded corner, different curves can be obtained. However, how to hide the extra lines is a problem.

Scheme 2:

Complete the curve with a radial gradient.

 background-image: radial-gradient(rgba(255, 0, 0, 1), rgba(0, 128, 0, 1), rgba(0, 0, 255, 1));
Copy the code

When the radius of the gradient between two adjacent colors is very small, it is hard to see the gradient effect, and it almost becomes a dividing line:

background-image: radial-gradient(red 50px, green 51px, #a9a9bb 52px);
Copy the code

The inner core of the radial gradient is circular by default, but it can also be set:

   background: radial-gradient(
      circle at 0 0,
      transparent 150px,
      black 151px,
      transparent 152px
    );
Copy the code

That’s the simplest curve.

Scheme 2 is obviously better than Scheme 1, so radial gradient is used to make:

Part of the code

    background: radial-gradient(
        circle at 0 0,
        transparent 147px,
        #fcc593 151px,
        transparent 155px
      ),
      radial-gradient(
        circle at 47px 89px,
        transparent 148px,
        #f9dbd3 151px,
        transparent 154px
      ),
      radial-gradient(
        circle at -10px -50px,
        transparent 146px,
        #b9c76d 151px,
        transparent 154px
      ),
      radial-gradient(
        circle at -15px -80px,
        transparent 148px,
        #66d6f1 151px,
        transparent 153px
      );
    background-size: 100%, 100% 70%, 100% 30%, 100% 70%;
    background-repeat: no-repeat;
Copy the code

OS: I wanted to have a fairy wand firework, but I couldn’t make it look like a fairy wand, emo…