div
ol
- for (var x = 0; x < 60; x++)
li
<svg viewBox="0 0 242 215" x="0px" y="0px" width="242px" height="215px"><path d="M 121.6281 97.2963 L 119.191 89.6497 L 118.7889 85.2373 L 113.5628 79.2203 L 104.3166 71.1978 L 100.2965 67.1864 L 98.6884 61.5706 L 98.2864 51.5424 L 99.4925 47.1299 L 101.1005 39.1073 L 103.1105 31.0847 L 95.0704 13.8362 L 87.8342 30.2825 L 89.4422 44.322 L 80.598 18.6497 L 61.7035 4.209 L 64.5176 27.4746 L 82.608 49.5367 L 74.1658 41.9153 L 70.9497 39.9096 L 53.2613 38.3051 L 62.9095 52.7458 L 77.3819 57.1582 L 87.0302 60.3672 L 91.8543 63.9774 L 97.8844 70.7966 L 99.0905 76.8136 L 101.1005 90.0508 L 103.5126 94.4633 L 110.6482 100.029 L 112.7085 102.9873 L 97.5327 94.9647 L 97.8844 92.4576 L 97.4824 87.243 L 97.4824 82.0283 L 96.6784 77.2147 L 90.6482 71.5989 L 88.6382 80.0226 L 90.2462 82.0283 L 89.8442 84.0339 L 87.8342 82.0283 L 80.196 75.6102 L 71.3518 75.6102 L 68.1357 74.0056 L 66.5276 67.1864 L 62.5075 53.548 L 60.0955 53.548 L 58.4874 57.9604 L 60.4975 64.3785 L 60.4975 68.3898 L 58.8894 68.791 L 55.6734 65.9831 L 54.8693 61.9717 L 52.8593 53.9492 L 50.0452 51.1412 L 47.6332 53.548 L 48.4372 58.3616 L 48.8392 61.9717 L 45.6231 61.1695 L 43.6131 58.7627 L 42.809 54.7514 L 41.603 50.7401 L 38.3869 49.1356 L 36.3769 55.5537 L 34.7688 54.3503 L 31.9548 53.548 L 29.9447 53.548 L 29.1407 54.7514 L 29.1407 56.757 L 34.7688 61.1695 L 32.3568 61.9717 L 28.7387 65.5819 L 31.9548 66.7853 L 34.7688 66.3842 L 39.593 64.7797 L 42.809 65.5819 L 45.2211 68.3898 L 38.3869 70.7966 C 38.3869 70.7966 36.7789 73.5042 36.7789 73.6045 C 36.7789 73.7048 39.593 74.4068 39.593 74.4068 L 44.4171 73.6045 L 51.2513 71.5989 L 54.4673 72.4011 L 57.6834 74.8079 L 53.6633 76.0113 L 46.4271 78.0169 L 43.6131 81.6271 L 47.6332 83.2316 L 57.2814 80.0226 L 64.5176 78.8192 L 67.3317 79.6215 L 69.7437 82.8305 L 73.3618 88.4463 L 77.3819 89.6497 L 83.8141 92.0565 L 80.598 92.8588 L 75.3719 98.8757 L 81.804 101.2825 L 84.6181 100.4802 L 93.4623 95.6667 L 96.2764 95.6667 L 97.4824 94.8644 L 112.7588 102.887 L 105.9246 101.2825 L 99.0905 98.8757 L 92.6583 100.8813 L 78.99 105.6949 L 74.5678 105.6949 L 71.3518 104.8927 L 62.1055 100.4802 L 57.6834 96.4689 L 44.4171 84.8362 L 26.7286 83.6328 L 37.9849 98.8757 L 50.8492 102.4859 L 48.0352 103.6893 L 23.5126 98.4746 L 1 107.7006 L 23.1106 117.3277 L 49.6432 111.7119 L 52.8593 111.7119 C 52.8593 111.7119 50.3467 112.9153 50.4472 112.9153 C 50.5477 112.9153 41.603 114.9209 41.603 114.9209 L 37.9849 117.3277 L 33.5628 121.7401 L 27.5327 131.7684 L 36.3769 131.3672 L 45.6231 130.1638 L 53.2613 123.7458 L 65.3216 112.113 L 73.7638 109.7062 L 77.7839 109.7062 L 84.6181 111.3107 L 92.6583 114.9209 L 97.8844 116.5254 L 102.1055 116.4251 L 107.5829 113.9181 L 111.5025 113.7677 L 97.6332 120.988 L 88.2362 116.9265 L 83.8141 114.5198 L 79.794 114.5198 L 74.9698 116.9265 L 79.794 121.339 L 84.2161 123.3446 L 81 124.9492 L 76.5779 125.3503 L 73.3618 127.3559 L 70.5477 131.3672 L 67.3317 136.1808 L 62.5075 136.5819 L 56.4774 134.9774 L 47.2312 131.7684 L 43.6131 133.3729 L 44.4171 135.3785 L 46.4271 136.9831 L 57.6834 140.9944 L 53.6633 143.8022 L 51.2513 143.8022 L 44.4171 141.3955 L 39.191 140.5932 L 36.3769 141.7966 L 37.5829 144.2034 L 41.201 145.8079 L 46.0251 147.8136 L 42.407 150.2203 L 39.191 150.2203 L 36.7789 149.0169 L 33.5628 148.2147 L 31.5528 148.6158 L 28.7387 150.2203 L 33.9648 155.0339 L 28.7387 158.243 L 28.7387 161.452 L 30.3467 161.8531 L 32.7588 161.8531 L 37.9849 159.0452 L 37.1809 161.0508 L 37.5829 163.8588 L 39.191 166.2656 L 41.603 164.661 L 42.809 160.6497 L 44.0151 155.8362 L 46.0251 154.2316 L 48.8392 153.0283 L 48.0352 156.6384 L 47.6332 161.452 L 50.0452 163.4576 L 52.8593 160.6497 L 55.2714 150.2203 L 56.0754 148.6158 L 60.4975 146.209 L 60.4975 149.8192 L 58.8894 154.2316 L 58.4874 158.6441 L 60.0955 161.8531 L 63.7136 159.0452 L 65.7236 150.2203 L 67.3317 143.4011 L 68.1357 141.3955 L 70.1457 140.1921 L 73.7638 140.1921 L 80.598 139.791 L 83.01 138.5876 L 86.2261 134.1751 L 87.4322 133.774 L 88.6382 136.1808 L 90.6482 143.8022 L 95.4724 138.9887 L 96.6784 136.1808 L 97.8844 125.3503 L 97.4824 120.9379 L 111.5528 113.7175 L 102.3065 123.3446 L 100.6985 128.9604 L 97.8844 144.6045 L 95.0704 148.2147 L 85.8241 155.435 L 76.5779 158.243 L 65.7236 161.452 L 61.3015 165.0621 L 53.6633 177.4972 L 69.7437 175.8926 L 73.7638 175.0904 L 82.206 167.4689 L 80.598 169.4745 L 66.9296 184.7175 L 64.1156 187.9266 L 63.3116 194.3446 L 61.7035 211.1921 L 79.794 197.9548 L 81 195.9492 L 85.0201 184.3164 L 90.6482 169.8757 L 88.6382 176.6949 L 87.4322 182.3107 L 87.8342 186.322 L 95.4724 201.5649 L 102.7085 186.322 L 102.7085 183.9153 L 101.9045 178.7006 L 97.8844 161.0508 L 97.8844 158.243 L 99.8945 148.6158 L 101.1005 146.6102 L 107.1307 141.7966 L 115.9749 133.774 L 118.7889 130.1638 L 120.8995 118.9823 L 121.6533 118.2804 L 121.603 134.9272 L 108.3367 143 L 105.5226 151.8249 L 108.7387 151.8249 L 113.1608 149.8192 L 116.3769 147.4124 L 115.9749 150.6215 L 114.3668 154.2316 L 114.7688 159.8474 L 117.1809 165.0621 L 119.191 168.2712 L 118.7889 171.0791 L 105.1206 184.3164 L 105.1206 187.9266 L 109.9447 187.1243 L 118.3869 179.1017 L 118.7889 184.3164 L 108.7387 194.7458 L 109.1407 197.9548 L 112.3568 197.9548 L 118.7889 192.339 L 118.7889 198.356 L 113.1608 203.1695 L 111.9548 205.5763 L 112.3568 208.7853 L 118.7889 205.9774 L 118.7889 211.5932 L 122.005 214 L 124.0151 211.5932 L 124.0151 205.9774 L 130.8492 208.7853 L 130.8492 205.1752 L 130.0452 203.1695 L 124.0151 197.5536 L 124.0151 193.5424 L 124.8191 193.1412 L 131.6533 197.9548 L 134.4673 197.5536 L 133.6633 193.9435 L 124.4171 184.7175 L 124.0151 182.3107 L 125.2211 179.9039 L 126.0251 180.3051 L 133.6633 187.1243 L 137.6834 187.9266 L 137.6834 183.9153 L 133.2613 179.9039 L 127.6332 174.6893 L 124.0151 170.2769 L 124.0151 167.0678 L 126.8291 162.6554 L 128.8392 158.6441 L 128.0352 154.2316 L 127.2312 149.8192 L 130.4472 150.6215 L 136.8794 151.8249 L 136.4774 147.0113 L 134.0653 143.8022 L 129.6432 140.5932 L 124.8191 136.5819 L 121.603 134.9774 L 121.603 118.1299 L 124.0151 130.1638 L 126.0251 133.3729 L 134.0653 140.1921 L 141.7035 146.6102 L 144.9196 153.8305 L 144.9196 163.0565 L 140.0955 182.3107 L 140.0955 185.5198 C 140.0955 185.5198 147.7839 201.2641 147.7337 201.1638 C 147.6834 201.0635 154.9698 186.322 154.9698 186.322 L 154.5678 181.1074 L 152.9598 169.0734 L 157.7839 183.5141 L 162.206 196.3503 L 166.2261 199.9604 L 181.5025 211.1921 L 179.8945 194.7458 L 178.2864 189.1299 L 174.6683 182.7119 L 166.2261 173.4859 L 156.9799 162.6554 L 171.0502 175.4915 L 190.3467 177.4972 L 179.4925 162.2542 L 154.9698 154.6328 L 147.7337 148.2147 L 144.9196 144.2034 L 141.7035 125.7514 L 139.6935 121.339 L 131.1005 114.1688 L 130.8995 113.0657 L 144.9698 121.0883 L 145.7236 135.3785 L 147.3317 138.9887 L 152.1558 143.4011 L 153.3618 140.1921 L 153.7638 135.7797 L 152.1558 131.3672 L 156.5779 133.774 L 160.598 138.5876 L 165.8241 140.1921 L 171.8543 139.791 L 175.0704 141.3955 L 176.2764 145.8079 L 179.4925 159.8474 L 183.5126 162.2542 L 184.7186 156.6384 L 182.3065 149.8192 L 181.9045 146.209 L 187.5327 148.6158 L 187.9347 153.0283 L 190.3467 161.452 L 193.9648 163.8588 L 195.1709 159.8474 L 193.9648 153.0283 L 197.9849 154.6328 L 199.593 158.6441 L 200.799 164.2599 L 204.8191 166.6667 L 206.0251 159.4463 L 211.2513 162.2542 L 214.0653 160.6497 L 213.2613 157.8418 L 209.2412 154.6328 L 214.4673 149.8192 L 209.6432 148.2147 L 205.2211 149.4181 L 201.201 149.8192 L 197.1809 147.4124 L 204.4171 145.0056 L 206.4271 141.3955 L 201.603 140.5932 L 192.7588 143.4011 L 189.1407 143.8022 L 185.9246 140.5932 L 188.7387 138.9887 L 196.7789 136.9831 L 199.1909 133.3729 L 195.1709 132.1695 L 177.4824 136.9831 L 173.4623 133.3729 L 171.8543 129.3616 L 167.4322 126.1526 L 162.206 124.548 L 159.794 122.9435 L 163.0101 121.7401 L 165.0201 119.7345 L 167.4322 116.1243 L 163.4121 114.5198 L 158.5879 114.1187 L 154.1658 117.3277 L 144.9196 120.9379 L 130.8492 112.9153 L 131.6533 112.9153 L 142.5075 116.5254 L 145.3216 116.5254 L 165.8241 109.7062 L 168.2362 109.3051 L 179.4925 114.1187 L 186.3266 119.3333 L 197.5829 130.565 L 216.4774 132.1695 L 205.6231 116.5254 L 191.5528 111.3107 L 215.2714 116.5254 L 219.6935 116.9265 L 241 107.7006 L 218.8895 98.0735 L 192.3568 104.0904 L 196.3769 101.2825 L 205.6231 98.4746 L 216.4774 83.2316 L 196.7789 85.6384 L 178.6884 102.4859 L 166.6281 106.4972 L 143.7136 98.4746 L 132.9598 102.2603 L 131.7035 102.1098 L 144.9447 93.7112 L 146.1256 95.6667 L 150.5477 97.2712 L 156.9799 100.4802 L 162.608 101.2825 L 167.8342 98.8757 L 165.4221 96.0678 L 161 92.8588 L 158.5879 92.0565 L 163.4121 90.8531 L 168.2362 89.2486 L 171.8543 85.6384 L 174.6683 79.6215 L 176.6784 78.8192 L 179.0905 78.4181 L 187.5327 80.8249 L 196.3769 83.2316 L 199.593 81.6271 L 197.1809 78.4181 L 191.1508 76.4124 L 185.9246 74.0056 L 190.3467 71.5989 L 198.3869 74.0056 L 204.0151 74.8079 L 206.0251 73.2034 L 204.4171 71.1978 L 199.995 69.1921 L 197.5829 67.1864 L 201.603 65.1808 L 204.4171 65.9831 L 209.2412 67.5876 L 212.0553 67.1864 L 214.4673 65.5819 L 208.8392 60.7684 L 213.2613 57.1582 L 214.0653 53.9492 L 210.8492 53.548 L 205.6231 55.1526 L 206.0251 51.9435 L 204.0151 48.7345 L 200.397 51.5424 L 199.593 56.757 L 197.9849 60.3672 L 194.3668 61.9717 L 194.7688 57.9604 L 195.5729 54.3503 L 193.5628 51.1412 L 190.3467 53.9492 L 188.3367 63.9774 L 185.9246 67.1864 L 181.9045 68.3898 L 183.1105 62.774 L 184.7186 56.3559 L 182.7085 52.7458 L 179.4925 55.9548 L 177.8844 65.1808 L 175.0704 73.2034 L 172.2563 76.0113 L 161.402 75.6102 L 154.9698 81.6271 L 152.5578 71.5989 L 147.3317 76.0113 L 146.1256 79.2203 L 144.9196 93.661 L 131.6533 102.0847 L 131.6533 101.2825 L 139.6935 93.661 L 141.3015 90.452 L 144.9196 71.5989 L 146.9296 67.5876 L 151.3518 64.3785 L 155.7739 60.3672 L 168.2362 56.757 L 179.4925 52.7458 L 190.3467 38.3051 L 170.2462 40.3107 L 163.8141 46.3277 L 163.8141 44.322 L 175.8744 31.0847 L 179.0905 26.2712 L 181.1005 4.6102 L 163.0101 17.8474 L 158.1859 29.8813 L 152.9598 44.322 L 154.1658 34.6949 L 154.9698 29.4802 L 152.5578 23.4633 L 147.3317 14.2373 L 140.4975 29.8813 L 140.4975 33.8927 L 145.3216 54.3503 L 144.1156 60.3672 L 143.7136 63.1751 L 142.1055 67.9887 L 135.2714 74.4068 L 124.8191 83.2316 L 121.603 97.2712 L 121.603 80.4237 L 114.7688 75.209 L 108.3367 72 L 106.7286 68.3898 L 105.9246 63.1751 L 111.1508 63.9774 L 115.9749 67.1864 L 114.7688 59.565 L 114.3668 55.1526 L 117.1809 50.7401 L 118.7889 47.9322 L 118.7889 44.7232 L 114.3668 39.9096 L 109.1407 35.096 L 107.1307 33.0904 L 104.3166 27.4746 L 107.9347 27.4746 L 113.9648 32.2881 L 118.3869 36.2994 L 118.7889 31.887 L 116.3769 28.2768 L 109.5427 21.8588 L 108.3367 19.452 L 108.7387 17.0452 L 111.5528 17.0452 L 118.3869 22.2599 L 118.3869 17.4463 L 113.1608 11.8305 L 111.9548 9.4237 L 111.9548 7.0169 L 113.9648 7.0169 L 118.3869 9.4237 L 118.7889 2.6045 L 121.603 1 L 123.6131 2.2034 L 124.0151 9.0226 L 130.8492 6.6158 L 130.8492 9.8249 L 128.8392 13.0339 L 124.0151 17.4463 C 124.0151 17.4463 123.4121 22.4604 123.6131 22.2599 C 123.8141 22.0593 131.2513 17.4463 131.2513 17.4463 L 134.4673 17.8474 L 133.6633 20.6554 L 123.6131 30.6836 L 123.6131 35.8983 C 123.6131 35.8983 127.9347 34.1935 128.0352 33.8927 C 128.1357 33.5918 132.4573 28.678 132.4573 28.678 L 138.0854 27.4746 L 137.6834 30.6836 L 134.0653 34.6949 L 124.4171 43.9209 L 124.0151 47.5311 L 126.4271 51.1412 L 128.0352 55.9548 L 128.0352 61.1695 L 126.8291 64.7797 L 126.8291 68.3898 L 129.2412 65.1808 L 133.2613 63.5763 L 136.8794 63.5763 L 136.4774 68.791 L 135.2714 72 L 121.6281 80.4488 "/></svg>
View Compiled
*{
margin:0;
padding:0;
box-sizing:border-box;
color:#fff;
}
div{
margin:0 auto;
width:242px;
height:215px;
ol{
list-style:none;
position:relative;
li{
position:absolute;
stroke-dasharray:0 5000;
svg{
animation:rotate 60s linear infinite;
path{
fill:none;
stroke:#333;
}
}
}
}
}
@for $i from 0 to 60{
li:nth-child(#{$i + 1}){
transform:rotate(#{$i * 12}deg);
animation:star 0.5s ease-out #{$i / 2 + 0.5}s 1 forwards;
path{
opacity:#{($i + 1) / 10};
}
}
}
@keyframes rotate{
0% {transform:rotateZ(0turn)rotateX(0turn)rotateY(0turn);}
100% {transform:rotateZ(1turn)rotateX(2turn)rotateY(1turn);}
}
@keyframes star{
0%{stroke-dasharray:0 5000;}
99.9%,to{stroke-dasharray:5000 5000;}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.