We are going to draw three stars, based on last work.

One Light

Computer is very good at duplicate things, especially when it is regular. Let's draw one light, then duplicate it into 48 lights.

1. <path id='L1' d='M360,0 C360,68 94,-62 94,0 94,62 360,-68 360,0z'/>

We make it id=L1 and now we rotate 180 degrees:

1. <g id='L2'>
2. <path id='L1' d='M360,0 C360,68 94,-62 94,0 94,62 360,-68 360,0z'/>
3. <use xlink:href='#L1' transform='rotate(180)'/>
4. </g>

Now we have two lights, and we group them as id=L2, and ready to rotate 90 degrees, so it will become 4 lights:

Let's group them as id=L4 and rotate 45 degrees, and becomes 8 lights; again we group them as id=L8, and rotate 22.5 degrees and becomes 16 Lights:

1. <g id='L8'>
2. <g id='L4'>
3. <g id='L2'>
4. <path id='L1' d='M360,0 C360,68 94,-62 94,0 94,62 360,-68 360,0z'/>
5. <use xlink:href='#L1' transform='rotate(180)'/>
6. </g>
7. <use xlink:href='#L2' transform='rotate(90)'/>
8. </g>
9. <use xlink:href='#L4' transform='rotate(45)'/>
10. </g>
11. <use xlink:href='#L8' transform='rotate(22.5)'/>

We group them as id=L16 and rotate 7.5 degrees and -7.5 degrees and it finally becomes 48 lights.

You can also make above star via inkscape:
star48 r1:360 r2:90 arg2:0.065449848 round:0.25
However it will be at least 40KB. We hand code it at only 480 bytes. How good it is to do manually.

How beautiful and easy to make it. Let's group it as id=L48 and duplicate as a red 48-light and a blue 48-light:

And here is the SVG code for the three 48-light stars:

1. <g id='L48'>
2. <g id='L16'>
3. <g id='L8'>
4. <g id='L4'>
5. <g id='L2'>
6. <path id='L1' d='M360,0 C360,68 94,-62 94,0 94,62 360,-68 360,0z'/>
7. <use xlink:href='#L1' transform='rotate(180)'/>
8. </g>
9. <use xlink:href='#L2' transform='rotate(90)'/>
10. </g>
11. <use xlink:href='#L4' transform='rotate(45)'/>
12. </g>
13. <use xlink:href='#L8' transform='rotate(22.5)'/>
14. </g>
15. <use xlink:href='#L16' transform='rotate(7.5)'/>
16. <use xlink:href='#L16' transform='rotate(-7.5)'/>
17. </g><!--L48-->
18. <use xlink:href='#L48' transform='scale(0.83)' fill='url(#RGbgRed)'/>
19. <use xlink:href='#L48' transform='scale(0.66)' fill='url(#RGbgBlue)'/>

We are going to add a different type of 48-light between the red and blue stars, ie between Line 18-19 above, and we mark it as L48a:

Then we duplicate L48a before the blue 48-lights, and scale to 0.81:

For this star, you can use inkcape to produce same result:
star48 r1:216 r2:165 arg2:0.065449848 round:10.8
However again size at least 35KB vs this 482 bytes hand code.

The red line L01 below is L18 in previous code, the blue line L22 below is L19 in previous code:

1. <use xlink:href='#L48' transform='scale(0.83)' fill='url(#RGbgRed)'/>
2. <g id='L48a'>
3. <g id='La48'>
4. <g id='La16'>
5. <g id='La8'>
6. <g id='La4'>
7. <g id='La2'>
8. <path id='La1' d='M 270,0 L 170,132 160,122 z'/>
9. <use xlink:href='#La1' transform='rotate(180)'/>
10. </g>
11. <use xlink:href='#La2' transform='rotate(90)'/>
12. </g>
13. <use xlink:href='#La4' transform='rotate(45)'/>
14. </g>
15. <use xlink:href='#La8' transform='rotate(22.5)'/>
16. </g>
17. <use xlink:href='#La16' transform='rotate(7.5)'/>
18. <use xlink:href='#La16' transform='rotate(-7.5)'/>
19. </g>
20. <use xlink:href='#La48' transform='scale(-1,1)'/>
21. </g>
22. <use xlink:href='#L48' transform='scale(0.66)' fill='url(#RGbgBlue)'/>
23. <use xlink:href='#L48a' transform='scale(0.81)'/>

SVG code tip

Today we learned several transform skills:
+ translate = move (x,y)
+ rotate (degrees)
+ scale (%) to zoom
+ scale(-1,1) == this becomes mirrored :)

Today's final svg code

We made five 48-lights, and added 2 new defs:

1. <?xml version='1.0'?>
2. <svg xmlns='http://www.w3.org/2000/svg' version='1.2' baseProfile='tiny' xmlns:xlink='http://www.w3.org/1999/xlink' width='450' height='600'>
3. <title>Namo Amitabha Buddha ★ 南無阿彌陀佛</title>
4. <defs>
5. <linearGradient id='LGbgBlue' x2='0' y2='1'><stop stop-color='#22a1d4'/><stop offset='1' stop-color='#13526c'/></linearGradient>
6. <radialGradient id='RGbgRed'><stop stop-color='#fcd207'/><stop offset='1' stop-color='#fc4f09'/></radialGradient>
7. <radialGradient id='RGbgBlue'><stop stop-color='#13526c'/><stop offset='1' stop-color='#22a1d4'/></radialGradient>
8. </defs>
9. <g transform='scale(0.5)'>
10. <rect width='900' height='1200' fill='url(#LGbgBlue)'/>
11. <g fill='#fff' transform='translate(450,600)'><!--5BackStar-->
12. <g id='L48'>
13. <g id='L16'>
14. <g id='L8'>
15. <g id='L4'>
16. <g id='L2'>
17. <path id='L1' d='M360,0 C360,68 94,-62 94,0 94,62 360,-68 360,0z'/>
18. <use xlink:href='#L1' transform='rotate(180)'/>
19. </g>
20. <use xlink:href='#L2' transform='rotate(90)'/>
21. </g>
22. <use xlink:href='#L4' transform='rotate(45)'/>
23. </g>
24. <use xlink:href='#L8' transform='rotate(22.5)'/>
25. </g>
26. <use xlink:href='#L16' transform='rotate(7.5)'/>
27. <use xlink:href='#L16' transform='rotate(-7.5)'/>
28. </g><!--L48-->
29. <use xlink:href='#L48' transform='scale(0.83)' fill='url(#RGbgRed)'/>
30. <g id='L48a'>
31. <g id='La48'>
32. <g id='La16'>
33. <g id='La8'>
34. <g id='La4'>
35. <g id='La2'>
36. <path id='La1' d='M 270,0 L 170,132 160,122 z'/>
37. <use xlink:href='#La1' transform='rotate(180)'/>
38. </g>
39. <use xlink:href='#La2' transform='rotate(90)'/>
40. </g>
41. <use xlink:href='#La4' transform='rotate(45)'/>
42. </g>
43. <use xlink:href='#La8' transform='rotate(22.5)'/>
44. </g>
45. <use xlink:href='#La16' transform='rotate(7.5)'/>
46. <use xlink:href='#La16' transform='rotate(-7.5)'/>
47. </g>
48. <use xlink:href='#La48' transform='scale(-1,1)'/>
49. </g><!--L48a-->
50. <use xlink:href='#L48' transform='scale(0.66)' fill='url(#RGbgBlue)'/>
51. <use xlink:href='#L48a' transform='scale(0.81)'/>
52. </g>
53. </g><!--scale-->
54. </svg>