├── .vscode
    └── settings.json
├── Bee
    ├── index.css
    └── index.html
├── CSSBattel
    ├── index.css
    ├── index.html
    └── song.mp3
├── DOGMAKEOVER
    ├── bg.jpg
    ├── bg1.jpg
    ├── dog-01.png
    ├── eyes-01.png
    ├── eyes-02.png
    ├── eyes-03.png
    ├── eyes-04.png
    ├── glasses-01.png
    ├── glasses-02.png
    ├── hats-01.png
    ├── hats-02.png
    ├── hats-03.png
    ├── index.css
    ├── index.html
    ├── index.js
    ├── mouth-01.png
    ├── mouth-02.png
    ├── mouth-03.png
    └── mouth-04.png
├── Diwali
    ├── index.css
    └── index.html
├── Ferb Illustration
    ├── index.css
    └── index.html
├── PUMPKIN
    ├── Momos.html
    ├── index.css
    └── index.html
├── README.md
├── SHEEP
    └── index.html
├── bird
    ├── index.css
    └── index.html
├── cake.html
├── candle
    ├── index.css
    ├── index.html
    └── rain.png
├── cat.html
├── edit.js
├── egg.html
├── frog.html
├── handingImages
    ├── index.css
    └── index.html
├── icecream.html
├── image1.png
├── index.html
├── package-lock.json
├── package.json
├── sanak.js
├── script.js
├── script1.js
├── script2.js
├── script3.js
├── script4.js
├── sketch.js
├── sketch1.js
├── snake.js
├── snow.html
├── solar
    ├── index.css
    └── index.html
├── style.css
└── sunset
    ├── building.png
    ├── index.css
    └── index.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Bee/index.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::before,
  3 | *::after{
  4 |     padding: 0;
  5 |     margin: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | body{
  9 |     
 10 |     background-color: rgb(19, 78, 50);
 11 | }
 12 | .bee{
 13 |     height: 100px;
 14 |     width: 270px;
 15 |     position: absolute;
 16 |     margin: auto;
 17 |     left: 0;
 18 |     right: 0;
 19 |     top: 0;
 20 |     bottom:-150px;
 21 |     border-radius:50px;
 22 |     background-color: rgba(255,255,255,0.5);
 23 |     
 24 | 
 25 | }
 26 | .bee::before{
 27 |     position: absolute;
 28 |     content: "";
 29 |     height: 200px;
 30 |     width: 140px;
 31 |     background: linear-gradient(
 32 |         #ffec02 70%,
 33 |         #202020 70%,
 34 |         #202020 75%,
 35 |         #ffec02 75%,
 36 |         #ffec02 80%,
 37 |         #202020 80%,
 38 |         #202020 85%,
 39 |         #ffec02 85%,
 40 |         #ffec02 90%,
 41 |         #202020 90%,
 42 |         #202020 95%,
 43 |         #ffec02 95%);
 44 |         border-radius: 70px;
 45 |         left: 65px;
 46 |         bottom: -45px;
 47 | }
 48 | .eye,
 49 | .eye::before{
 50 |     position: absolute;
 51 |     height: 13.5px;
 52 |     width: 25px;
 53 |     border: 7px solid #202020;
 54 |     border-radius:20px 20px 0 0 ;
 55 |     bottom: 95px;
 56 |     border-bottom: none;
 57 | }
 58 | .eye{
 59 |     left: 98px;
 60 | }
 61 | .eye::before{
 62 |     content: "";
 63 |     bottom: 0;
 64 |     left: 40px;
 65 | }
 66 | .antenna,
 67 | .antenna::before{
 68 |    position: absolute;
 69 |    height: 50px;
 70 |    width: 8px;
 71 |    background-color: #202020;
 72 | }
 73 | 
 74 | .antenna::before{
 75 |     content: "";
 76 |     right: 55px;
 77 |     top: 25px;
 78 |     transform: rotate(-50deg);
 79 | }
 80 | .antenna{
 81 |     left: 164px;
 82 |     bottom: 130px;
 83 |     transform: rotate(25deg);
 84 |     z-index: -1;
 85 | }
 86 | .antenna::after{
 87 |     position: absolute;
 88 |     content: "";
 89 |     height: 20px;
 90 |     width: 20px;
 91 |     background-color:#202020;
 92 |     border-radius:50%;
 93 |     left:-6px;
 94 |     bottom: 40px;
 95 |     box-shadow: -72px 35px #202020;
 96 | 
 97 | }
 98 | .mouth{
 99 |      position: absolute;
100 |      height: 40px;
101 |      width: 80px;
102 |      background: radial-gradient(circle at 50% 100%,
103 |      #ef072e 15px , #202020 16px);
104 |      top: 20px;
105 |      left: 93px;
106 |      border-radius: 0 0 40px 40px;
107 |      }
108 | .mouth::before{
109 |     position: absolute;
110 |     content: "";
111 |     height: 10px;
112 |     width: 50px;
113 |     background-color: #ffffff;
114 |     left: 14px;
115 |     top:-0.5px;
116 | }


--------------------------------------------------------------------------------
/Bee/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Bee Css-Art</title>
 8 |     <link rel="stylesheet" href="index.css">
 9 | </head>
10 | <body>
11 |     <div class="bee">
12 |         <div class="eye"></div>
13 |         <div class="antenna"></div>
14 |         <div class="mouth"></div>
15 |     </div>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/CSSBattel/index.css:
--------------------------------------------------------------------------------
  1 | .white-keys{
  2 |     display: flex;
  3 |     gap: 5px;
  4 |     align-items: stretch;
  5 |     background-color: black;
  6 |     padding: 1rem;
  7 |     height: 100px;
  8 |     position: absolute;
  9 |     top: 33%;
 10 |     padding: 5px;
 11 |     border-radius: 5px;
 12 |     padding-top: 35px;
 13 |     left: 112px;
 14 | }
 15 | 
 16 | .black-keys{
 17 |     position: absolute;
 18 |     
 19 |     height: 50px;
 20 |     top: 38%;
 21 |     left: 132px;
 22 |     display: flex;
 23 |     gap: 10px;
 24 |     align-items: stretch;
 25 | }
 26 | 
 27 | 
 28 | .white{
 29 |     background: white;
 30 |     width: 20px;
 31 |     border-radius: 5px;
 32 |     /* height: 30px; */
 33 | 
 34 | }
 35 | .black{
 36 |     background: black;
 37 |     width: 15px;
 38 |     
 39 |     /* border-radius: 5px; */
 40 |     /* height: 30px; */
 41 | 
 42 | }
 43 | 
 44 | .empty{
 45 |     background: none ;
 46 | }
 47 | .black1{
 48 |     background: black;
 49 |     width: 15px;
 50 |     animation: anim 5s infinite;
 51 | }
 52 | 
 53 | @keyframes anim {
 54 |     0%{
 55 |         background: none;
 56 | 
 57 |     }
 58 |     10%{
 59 |         background:black;
 60 |     }
 61 |     20%{
 62 |         background:none;
 63 |     }
 64 |     40%{
 65 |         background: none;
 66 |     }
 67 |     60%{
 68 |         background: black;
 69 |     }
 70 |     80%{
 71 |         background: none;
 72 |     }
 73 |     100%{
 74 |         background: black;
 75 |     }
 76 | }
 77 | .wrapper {
 78 |     display: flex;
 79 |     justify-content: center;
 80 |     align-items: center;
 81 |     height: 100vh;
 82 |     background-color: yellow;
 83 | }
 84 | 
 85 | *{
 86 |     box-sizing: border-box;
 87 |     
 88 | }
 89 | 
 90 | .black2{
 91 |     background: black;
 92 |     width: 15px;
 93 |     animation: anim2 5s infinite;
 94 | }
 95 | 
 96 | @keyframes anim2 {
 97 |     10%{
 98 |         background: none;
 99 | 
100 |     }
101 |     20%{
102 |         background:black;
103 |     }
104 |     30%{
105 |         background:none;
106 |     }
107 |     50%{
108 |         background: black;
109 |     }
110 |     60%{
111 |         background: black;
112 |     }
113 |     80%{
114 |         background: none;
115 |     }
116 |     90%{
117 |         background: black;
118 |     }
119 |     100%{
120 |         background: black;
121 |     }
122 | }
123 | 
124 | .black3{
125 |     background: black;
126 |     width: 15px;
127 |     animation: anim3 5s infinite;
128 | }
129 | 
130 | @keyframes anim3 {
131 |     0%{
132 |         background: none;
133 | 
134 |     }
135 |     50%{
136 |         background:black;
137 |     }
138 |     
139 |     100%{
140 |         background: black;
141 |     }
142 | }
143 | 
144 | .black4{
145 |     background: black;
146 |     width: 15px;
147 |     animation: anim4 5s infinite;
148 | }
149 | 
150 | @keyframes anim4 {
151 |     0%{
152 |         background: none;
153 | 
154 |     }
155 |     15%{
156 |         background:black;
157 |     }
158 |     
159 |     30%{
160 |         background:none
161 |     }
162 |     45%{
163 |           background: black;
164 |     }
165 |     60%{
166 |          background: none;
167 |     }
168 |     75%{
169 |         background: black;
170 |     }
171 |     90%{
172 |          background: none;
173 |     }
174 | }


--------------------------------------------------------------------------------
/CSSBattel/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>CSS BATTEL</title>
 8 |     <link rel="stylesheet" href="index.css">
 9 | </head>
10 | <body>
11 |     <div class="wrapper">
12 |     <div class="white-keys">
13 |         <div class="white"></div>
14 |         <div class="white"></div>
15 |         <div class="white"></div>
16 |         <div class="white"></div>
17 |         <div class="white"></div>
18 |         <div class="white"></div>
19 |         <div class="white"></div>
20 |     </div>
21 | 
22 |     <div class="black-keys">
23 |         <div class="black empty"></div>
24 |         <div class="black1"></div>
25 |         <div class="black"></div>
26 |         <div class="black2"></div>
27 |     
28 |         <div class="black3"></div>
29 |         <div class="black4"></div>
30 |         
31 |     </div>
32 | 
33 | </div>
34 | 
35 | </body>
36 | <script>
37 |     
38 |        var should_play=true
39 |     window.onclick = () => {
40 |         if (should_play){
41 |             should_play=!should_play
42 |             let soundSource = "song.mp3";
43 |             let sound = new Audio(soundSource);
44 |             sound.play();
45 |             sound.onended = () => {
46 |                 should_play=true
47 |             }
48 |         }
49 | 
50 |     }
51 | </script>
52 | </html>


--------------------------------------------------------------------------------
/CSSBattel/song.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/CSSBattel/song.mp3


--------------------------------------------------------------------------------
/DOGMAKEOVER/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/bg.jpg


--------------------------------------------------------------------------------
/DOGMAKEOVER/bg1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/bg1.jpg


--------------------------------------------------------------------------------
/DOGMAKEOVER/dog-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/dog-01.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/eyes-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/eyes-01.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/eyes-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/eyes-02.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/eyes-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/eyes-03.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/eyes-04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/eyes-04.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/glasses-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/glasses-01.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/glasses-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/glasses-02.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/hats-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/hats-01.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/hats-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/hats-02.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/hats-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/hats-03.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 |   }
 6 |   body {
 7 |        background-size:cover;
 8 |          /* background-position: right; */
 9 |     background-repeat: no-repeat;
10 |     background-image: url("bg.jpg");
11 |     /* background-color: #b1ea7c; */
12 |   }
13 |   .container {
14 |     width: 31.25em;
15 |     position: absolute;
16 |     transform: translateX(10%);
17 |     left: 50%;
18 |     margin: 1em auto;
19 |     /* border: 2px solid black; */
20 |     box-shadow: 0 0 0 0.62em #ffffff, 0 1.25em 3.12em rgb(83, 66, 15, 0.5);
21 |     background-color: #ffffff;
22 |     border-radius: 0.5em;
23 |   }
24 |   .dog {
25 |     width: 95%;
26 |     height: 21.87em;
27 |     position: relative;
28 |     margin: 1em auto;
29 |     display: grid;
30 |     place-items: center;
31 |     background-color: #ffedb8;
32 |     overflow: hidden;
33 |   }
34 |   .dog img {
35 |     position: relative;
36 |     height: 18.75em;
37 |     bottom: -1.87em;
38 |   }
39 |   .draggables {
40 |     padding: 1em 0;
41 |     width: 31.25em;
42 |     position: relative;
43 |     background-color: #ffffff;
44 |   }
45 |   .draggables div {
46 |     position: relative;
47 |   }
48 |   [draggable] {
49 |     cursor: move;
50 |   }
51 |   img {
52 |     position: absolute;
53 |   }
54 |   .eyes {
55 |     height: 3.75em;
56 |   }
57 |   .mouths {
58 |     height: 3.12em;
59 |   }
60 |   .glasses {
61 |     height: 5em;
62 |   }
63 |   .hats {
64 |     height: 7em;
65 |   }
66 |   #eye-01,
67 |   #mouth-01 {
68 |     left: 0.93em;
69 |   }
70 |   #hat-01 {
71 |     left: 5em;
72 |   }
73 |   #glass-01 {
74 |     left: 4.37em;
75 |   }
76 |   
77 |   #eye-02,
78 |   #mouth-02 {
79 |     left: 8.43em;
80 |   }
81 |   #hat-02 {
82 |     left: 12.5em;
83 |   }
84 |   #glass-02 {
85 |     left: 18.75em;
86 |   }
87 |   
88 |   #eye-03,
89 |   #mouth-03 {
90 |     left: 15.93em;
91 |   }
92 |   #hat-03 {
93 |     left: 22.5em;
94 |   }
95 |   
96 |   #eye-04,
97 |   #mouth-04 {
98 |     left: 23.43em;
99 |   }


--------------------------------------------------------------------------------
/DOGMAKEOVER/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |     <title>Dog Makeover</title>
  6 |     <!-- Stylesheet -->
  7 |     <link rel="stylesheet" href="index.css" />
  8 |   </head>
  9 |   <body>
 10 |     <div class="container">
 11 |       <div class="dog" id="dog">
 12 |         <img src="dog-01.png" id="dog-image" />
 13 |       </div>
 14 |       <div class="draggables">
 15 |         <div class="eyes">
 16 |           <img
 17 |             src="eyes-01.png"
 18 |             class="drag eye"
 19 |             draggable="true"
 20 |             id="eye-01"
 21 |           />
 22 |           <img
 23 |             src="eyes-02.png"
 24 |             class="drag eye"
 25 |             draggable="true"
 26 |             id="eye-02"
 27 |           />
 28 |           <img
 29 |             src="eyes-03.png"
 30 |             class="drag eye"
 31 |             draggable="true"
 32 |             id="eye-03"
 33 |           />
 34 |           <img
 35 |             src="eyes-04.png"
 36 |             class="drag eye"
 37 |             draggable="true"
 38 |             id="eye-04"
 39 |           />
 40 |         </div>
 41 |         <div class="mouths">
 42 |           <img
 43 |             src="mouth-01.png"
 44 |             class="drag mouth"
 45 |             draggable="true"
 46 |             id="mouth-01"
 47 |           />
 48 |           <img
 49 |             src="mouth-02.png"
 50 |             class="drag mouth"
 51 |             draggable="true"
 52 |             id="mouth-02"
 53 |           />
 54 |           <img
 55 |             src="mouth-03.png"
 56 |             class="drag mouth"
 57 |             draggable="true"
 58 |             id="mouth-03"
 59 |           />
 60 |           <img
 61 |             src="mouth-04.png"
 62 |             class="drag mouth"
 63 |             draggable="true"
 64 |             id="mouth-04"
 65 |           />
 66 |         </div>
 67 |         <div class="glasses">
 68 |           <img
 69 |             src="glasses-01.png"
 70 |             class="drag glass"
 71 |             draggable="true"
 72 |             id="glass-01"
 73 |           />
 74 |           <img
 75 |             src="glasses-02.png"
 76 |             class="drag glass"
 77 |             draggable="true"
 78 |             id="glass-02"
 79 |           />
 80 |         </div>
 81 |         <div class="hats">
 82 |           <img
 83 |             src="hats-01.png"
 84 |             class="drag hat"
 85 |             draggable="true"
 86 |             id="hat-01"
 87 |           />
 88 |           <img
 89 |             src="hats-02.png"
 90 |             class="drag hat"
 91 |             draggable="true"
 92 |             id="hat-02"
 93 |           />
 94 |           <img
 95 |             src="hats-03.png"
 96 |             class="drag hat"
 97 |             draggable="true"
 98 |             id="hat-03"
 99 |           />
100 |         </div>
101 |       </div>
102 |     </div>
103 |     <!-- Script -->
104 |     <script src="index.js"></script>
105 |   </body>
106 | </html>


--------------------------------------------------------------------------------
/DOGMAKEOVER/index.js:
--------------------------------------------------------------------------------
 1 | let currele="";
 2 | let initX=0;
 3 | let initY=0;
 4 | 
 5 | const isTouch=()=>{
 6 |     try{
 7 |         document.createEvent("TouchEvent")
 8 |         return true;
 9 | 
10 |         
11 | 
12 | 
13 |     }catch(e){
14 |     return false;
15 |     }
16 | };
17 | 
18 | function dragStart(e){
19 |     initX=isTouch() ? e.touches[0].clientX :
20 |     e.clientX;
21 |     initY=isTouch() ? e.touches[0].clientY :
22 |     e.clientY;
23 |     currele=e.target;
24 | 
25 | }
26 | function dragover(e){
27 |      e.preventDefault();
28 | 
29 | }
30 | const drop=(e)=>{
31 |    e.preventDefault()
32 |    let newX = isTouch() ? e.touches[0].clientX : e.clientX;
33 |   let newY = isTouch() ? e.touches[0].clientY : e.clientY;
34 |   currele.style.top =
35 |   currele.offsetTop-(initY-newY)+"px";
36 |   currele.style.left=
37 |   currele.offsetLeft-(initX-newX)+"px";
38 | };
39 | 
40 | window.onload=()=>{
41 |     currele="";
42 |     let body=document.body;
43 |     body.addEventListener('dragstart',dragStart,
44 |     false);
45 |     body.addEventListener('dragover',dragover,
46 |     false);
47 |     body.addEventListener('drop',drop,
48 |     false);
49 |     body.addEventListener('touchstart',dragStart,
50 |     false);
51 |     body.addEventListener("touchmove", drop, false);
52 | }
53 | 


--------------------------------------------------------------------------------
/DOGMAKEOVER/mouth-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/mouth-01.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/mouth-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/mouth-02.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/mouth-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/mouth-03.png


--------------------------------------------------------------------------------
/DOGMAKEOVER/mouth-04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/DOGMAKEOVER/mouth-04.png


--------------------------------------------------------------------------------
/Diwali/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Sacramento'); 
  2 | 
  3 | *{
  4 | margin: 0;
  5 | padding: 0;
  6 | box-sizing: border-box;
  7 | 
  8 | }
  9 | body{
 10 | background-color: black;
 11 | 
 12 |     font-family: 'Sacramento', cursive;
 13 |   
 14 | }
 15 | .top_surface{
 16 | width: 100%;
 17 | height: 300px;
 18 | position: relative;
 19 | top: 0;
 20 | 
 21 | }
 22 | .bottom_surface{
 23 | clip-path: ellipse(63% 68% at 50% 28%);
 24 | position: absolute;
 25 | width: 100%;
 26 | height: 100px;
 27 | 
 28 | bottom: -50px;
 29 | }
 30 | .semi_circle{
 31 | width: 300px;
 32 | height: 150px;
 33 | border-radius: 0 0 150px 150px;
 34 | background-color: #f7d658;
 35 | position: absolute;
 36 | bottom:-150px;
 37 | left: 40%;
 38 | }
 39 | .top_circle{
 40 | position: absolute;
 41 | width: 100%;
 42 | height: 100px;
 43 | border-radius: 100%;
 44 | top: -48px;
 45 | background-color: #f35d22;
 46 | 
 47 | }
 48 | ul{
 49 | position: relative;
 50 | width: 300px;
 51 | height: 300px;
 52 | border-radius: 100%;
 53 | margin-top: -200px;
 54 | background-color: #9c9c9c49;
 55 | list-style: none;
 56 | animation: myfirst 5s linear 2s infinite alternate;
 57 | }
 58 | @keyframes myfirst {
 59 | 0%{
 60 |     background-color: #9c9c9c49;
 61 |     width: 300px;
 62 |     height: 300px;
 63 |     margin-top: -200px;
 64 | }
 65 | 100%{
 66 |     background-color: #9c9c9c80;
 67 |     width: 350px;
 68 |     height: 350px;
 69 |     margin-top: -248px;
 70 |     margin-left: -30px;
 71 | }
 72 | }
 73 | li{
 74 | width: 150px;
 75 | height: 150px;
 76 | background-color: #9c9c9c49;
 77 | list-style: none;
 78 | border-radius: 50%;
 79 | position: absolute;
 80 | }
 81 | li:nth-child(1){
 82 | bottom: 70px;
 83 | left:30px;
 84 | }
 85 | li:nth-child(2){
 86 | bottom: 110px;
 87 | left:90px;
 88 | }
 89 | li:nth-child(3){
 90 | bottom: 35px;
 91 | left:98px;
 92 | }
 93 | .outer_flame{
 94 | position: absolute;
 95 | width: 150px;
 96 | height: 140px;
 97 | border-radius: 15px 180px 0px 180px;
 98 | top: -38px;
 99 | left: -2px;
100 | background-color: #fff;
101 | transform: rotate(44deg);
102 | transform-origin: bottom right;
103 | overflow: hidden;
104 | animation: mysecond 5s linear 2s infinite alternate;
105 | }
106 | @keyframes mysecond {
107 | 0%{
108 |     transform:rotate(30deg);
109 |     box-shadow: -10px -7px 10px 10px #f7d758cb;
110 | }
111 | 100%{
112 |     transform:rotate(60deg);
113 |     box-shadow: 0px -16px 10px 10px #f7d758cb;
114 | }
115 | }
116 | .inner_flame{
117 | width: 120px;
118 | height: 60px;
119 | position: absolute;
120 | right: 49px;
121 | border-radius: 79px 0px 80px 2px;
122 | top: 100px;
123 | background-color: #f7d658;
124 | transform: rotate(66deg);
125 | transform-origin: bottom right;
126 | animation: mythird 5s linear 2s infinite alternate; 
127 | }
128 | @keyframes mythird {
129 | 0%{
130 |     background: #ffcc00;
131 |     box-shadow: 0px 10px 10px 3px #f94d08;
132 | }
133 | 100%{
134 |     background: #ffdd53;
135 |     box-shadow: 0px 10px 10px 3px #f94d08;
136 | }
137 | 
138 | }
139 | .title{
140 | font-size:5rem;
141 | color:white;
142 | text-align:center;
143 | text-shadow:0px 2px 1px orange,
144 |   0px 0px 6px orangered,0px 5px 10px rgba(0,0,0,1);
145 | }
146 | 
147 | 
148 | 
149 | 
150 | 
151 | 
152 | .candle {
153 |     width: 15em;
154 |     height: 30em;
155 |     font-size: 7px;
156 |     left: 15%;
157 | 
158 |     background: linear-gradient(
159 |         orange,
160 |         darkorange,
161 |         sienna,
162 |         saddlebrown 50%,
163 |         rgba(0, 0, 0, 0.6)
164 |     );
165 |     box-shadow: 
166 |         inset 2em -3em 5em rgba(0, 0, 0, 0.4),
167 |         inset -2em 0 5em rgba(0, 0, 0, 0.4);
168 |     border-radius: 10em / 4em;
169 |     position: relative;
170 |     display: flex;
171 |     justify-content: center;
172 | 
173 | }
174 | .candle2 {
175 |     width: 15em;
176 |     height: 30em;
177 |     font-size: 7px;
178 |     left: 70%;
179 | 
180 |     background: linear-gradient(
181 |         orange,
182 |         darkorange,
183 |         sienna,
184 |         saddlebrown 50%,
185 |         rgba(0, 0, 0, 0.6)
186 |     );
187 |     box-shadow: 
188 |         inset 2em -3em 5em rgba(0, 0, 0, 0.4),
189 |         inset -2em 0 5em rgba(0, 0, 0, 0.4);
190 |     border-radius: 10em / 4em;
191 |     position: relative;
192 |     display: flex;
193 |     justify-content: center;
194 |     top:-200px;
195 | 
196 | }
197 | 
198 | 
199 | .candle::before {
200 |     content: '';
201 |     position: absolute;
202 |     width: inherit;
203 |     height: 5em;
204 |     border: 0.2em solid darkorange;
205 |     border-radius: 50%;
206 |     box-sizing: border-box;
207 |     background: radial-gradient(
208 |         #444,
209 |         orange,
210 |         saddlebrown,
211 |         sienna,
212 |         darkorange
213 |     );
214 |     filter: opacity(0.7);
215 | }
216 | 
217 | .thread {
218 |     position: absolute;
219 |     width: 0.6em;
220 |     height: 3.6em;
221 |     top: -1.8em;
222 |     background: linear-gradient(
223 |         #111,
224 |         black,
225 |         orange 90%
226 |     );
227 |     border-radius: 40% 40% 0 0;
228 | }
229 | 
230 | .flames {
231 |     position: absolute;
232 |     width: 2.4em;
233 | }
234 | 
235 | .flames::before {
236 |     content: '';
237 |     position: absolute;
238 |     width: inherit;
239 |     height: 6em;
240 |     background-color: royalblue;
241 |     top: -4.8em;
242 |     border-radius: 50% 50% 35% 35%;
243 |     border: 0.2em solid dodgerblue;
244 |     box-sizing: border-box;
245 |     filter: opacity(0.7);
246 | }
247 | 
248 | .flames::after {
249 |     content: '';
250 |     position: absolute;
251 |     width: inherit;
252 |     height: 12em;
253 |     top: -12em;
254 |     background: linear-gradient(white 80%, transparent);
255 |     border-radius: 50% 50% 20% 20%;
256 |     box-shadow: 0 -0.6em 0.4em darkorange;
257 |     animation: 
258 |         enlarge 5s linear infinite,
259 |         move 6s linear infinite;
260 | }
261 | 
262 | @keyframes move {
263 |     0%, 100% {
264 |         transform: rotate(2deg);
265 |     }
266 | 
267 |     50% {
268 |         transform: rotate(-2deg);
269 |     }
270 | }
271 | 
272 | @keyframes enlarge {
273 |     0%, 100% {
274 |         height: 12em;
275 |         top: -12em;
276 |     }
277 | 
278 |     50% {
279 |         height: 14em;
280 |         top: -13em;
281 |     }
282 | }
283 | 
284 | .glow {
285 |     position: absolute;
286 |     width: 10em;
287 |     height: 18em;
288 |     background-color: orangered;
289 |     border-radius: 50%;
290 |     top: -17em;
291 |     filter: blur(6em);
292 |     animation: blink 100ms infinite;
293 | }
294 | 
295 | @keyframes blink {
296 |     to {
297 |         filter: blur(6em) opacity(0.8);
298 |     }
299 | }
300 | 


--------------------------------------------------------------------------------
/Diwali/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Happy Diwali</title>
 8 |   <link rel="stylesheet" href="index.css">
 9 |   
10 | 
11 |     </style>
12 | </head>
13 | <body>
14 |     <div class="title">Wishing You & Your Family <br/> A Very Happy Diwali!</div>
15 |   <div class="top_surface">
16 |     <div class="bottom_surface"></div>
17 |     <div class="semi_circle">
18 |         <div class="top_circle">
19 |             <ul>
20 |                 <li></li>
21 |                 <li></li>
22 |                 <li></li>
23 |             </ul>
24 |             <div class="outer_flame">
25 |                 <div class="inner_flame"></div>
26 |             </div>
27 |         </div>
28 |     </div>
29 | </div>
30 |  <div class="candle">
31 |     <span class="glow"></span>
32 |     <span class="flames"></span>
33 |     <span class="thread"></span>
34 |   </div> 
35 | 
36 |   <div class="candle2">
37 |     <span class="glow"></span>
38 |     <span class="flames"></span>
39 |     <span class="thread"></span>
40 |   </div> 
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Ferb Illustration/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background-color: black;
  3 |   padding: 0;
  4 |   margin: 0;
  5 | }
  6 | .container {
  7 |   height: 350px;
  8 |   width: 350px;
  9 |   position: absolute;
 10 |   margin: auto;
 11 |   top: 0;
 12 |   bottom: 0;
 13 |   left: 0;
 14 |   right: 0;
 15 | }
 16 | .face {
 17 |   height: 0;
 18 |   width: 45px;
 19 |   border-top: 160px solid #fee1c3;
 20 |   border-left: 5px solid transparent;
 21 |   border-right: 5px solid transparent;
 22 |   position: relative;
 23 |   top: 100px;
 24 |   left: 140px;
 25 | }
 26 | .eye1 {
 27 |   height: 35px;
 28 |   width: 29px;
 29 |   background-color: white;
 30 |   position: relative;
 31 |   bottom: 146px;
 32 |   right: 17px;
 33 |   border-radius: 50%;
 34 |   border: 1px solid black;
 35 | }
 36 | .eyeball1 {
 37 |   background-color: black;
 38 |   width: 6px;
 39 |   height: 6px;
 40 |   border-radius: 50%;
 41 |   position: relative;
 42 |   top: 20px;
 43 |   left: 8px;
 44 | }
 45 | .nose {
 46 |   background-color: #fee1c3;
 47 |   height: 45px;
 48 |   width: 45px;
 49 |   position: relative;
 50 |   right: 32px;
 51 |   bottom: 152px;
 52 |   border-radius: 10px 0 0 10px;
 53 | }
 54 | .ear {
 55 |   background-color: #fee1c3;
 56 |   height: 22px;
 57 |   width: 20px;
 58 |   position: relative;
 59 |   bottom: 180px;
 60 |   left: 42px;
 61 |   border-radius: 0 20px 20px 0;
 62 | }
 63 | .lip {
 64 |   height: 0;
 65 |   width: 0;
 66 |   border-bottom: 20px solid #fee1c3;
 67 |   border-right: 8px solid transparent;
 68 |   border-left: 8px solid transparent;
 69 |   position: relative;
 70 |   bottom: 162px;
 71 |   right: 7px;
 72 | }
 73 | .hair {
 74 |   position: relative;
 75 |   bottom: 304px;
 76 | }
 77 | .hair > div:nth-child(1) {
 78 |   background-color: transparent;
 79 |   height: 30px;
 80 |   width: 100px;
 81 |   border-top: 20px solid #20a44a;
 82 |   border-radius: 50px 40px 0 0;
 83 |   position: relative;
 84 |   right: 38px;
 85 |   top: 2px;
 86 |   transform: rotate(-5deg);
 87 | }
 88 | .hair > div:nth-child(2) {
 89 |   height: 30px;
 90 |   width: 40px;
 91 |   border-top: 10px solid #20a44a;
 92 |   border-radius: 30px 50px 0 0;
 93 |   position: relative;
 94 |   bottom: 33px;
 95 |   left: 15px;
 96 | }
 97 | .hair > div:nth-child(3) {
 98 |   height: 30px;
 99 |   width: 45px;
100 |   border-top: 10px solid #20a44a;
101 |   border-radius: 50%;
102 |   position: relative;
103 |   bottom: 90px;
104 |   left: 18px;
105 |   transform: rotate(-20deg);
106 | }
107 | .hair > div:nth-child(4) {
108 |   height: 30px;
109 |   width: 30px;
110 |   border-top: 10px solid #20a44a;
111 |   border-radius: 50%;
112 |   position: relative;
113 |   bottom: 147px;
114 |   left: 25px;
115 |   transform: rotate(-120deg);
116 | }
117 | .hair > div:nth-child(5) {
118 |   height: 0px;
119 |   width: 0px;
120 |   border-top: 50px solid #20a44a;
121 |   border-left: 5px solid transparent;
122 |   border-right: 5px solid transparent;
123 |   position: relative;
124 |   bottom: relative;
125 |   bottom: 195px;
126 |   right: 5px;
127 |   transform: rotate(-70deg);
128 | }
129 | .eyer {
130 |   background-color: white;
131 |   width: 28px;
132 |   height: 25px;
133 |   position: relative;
134 |   bottom: 480px;
135 |   border-radius: 50%;
136 |   border: 1px solid black;
137 | }
138 | .eyeball2 {
139 |   background-color: black;
140 |   width: 6px;
141 |   height: 6px;
142 |   border-radius: 50%;
143 |   position: relative;
144 |   top: 15px;
145 |   left: 8px;
146 | }
147 | 


--------------------------------------------------------------------------------
/Ferb Illustration/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title></title>Ferb Illustration 
 8 |     <link rel="stylesheet" href="index.css">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <div class="face">
13 |             <div class="eye1">
14 |                 <div class="eyeball1"></div>
15 |             </div>
16 | 
17 |             <div class="nose"></div>
18 |             <div class="ear"></div>
19 |             <div class="lip"></div>
20 |             <div class="hair">
21 |                 <div></div>
22 |                 <div></div>
23 |                 <div></div>
24 |                 <div></div>
25 |                 <div></div>
26 |                 </div>
27 |                 <div class="eyer">
28 |                     <div class="eyeball2"></div>           
29 |                  </div>
30 |             </div>
31 |             </div>
32 | 
33 |     
34 | 
35 |     </div>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/PUMPKIN/Momos.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         body{
10 |     width: 100%;
11 |     height: 100%;
12 |     background-color: black;
13 |     overflow: hidden;
14 |     margin-top: 15%;
15 | }
16 | 
17 | .pumpkin{
18 | 
19 |     height: 100%;
20 |     z-index: 10;
21 |      position: relative;
22 |      width: 120px;
23 |      height: 100px;
24 |      background-color: #f18b36;
25 |      border-radius: 70px;
26 |      margin: 2em auto;
27 |      background-image: linear-gradient(
28 |         to right, #f6ad60 10%,
29 |          #f18b36 50%
30 | 
31 | 
32 |      );
33 |      box-shadow:-30px 0 0 0 #f38b36,
34 |      -50px 0 0 0 #c95927,
35 |      30px 0 0 0 #c95927,
36 |      50px 0 0 0 #97441a;
37 |      transform: scaleY(1.5);
38 | 
39 | }
40 | /* .pumpkin::before{
41 |     content: "";
42 |     position: absolute;
43 | 
44 |     width: 60px;
45 |     height: 25px;
46 |     top:-25%;
47 |     left: -25%;
48 |     background-image: linear-gradient(10deg,blue 50%,
49 |     transparent 50%);
50 | }
51 | .pumpkin::after{
52 |     content: "";
53 |     position: absolute;
54 |     width:60px;
55 |     height: 25px;
56 |     top:-25%;
57 |     left: 50%;
58 |     /* background-color: blue; */
59 | 
60 | 
61 | 
62 |     </style>
63 | </head>
64 | <body>
65 |     <div class="pumpkin">
66 |         
67 |        </div>
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/PUMPKIN/index.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |     width: 100%;
  3 |     height: 100%;
  4 |     background-color: black;
  5 |     overflow: hidden;
  6 |     margin-top: 15%;
  7 | }
  8 | #outer{
  9 |     height: 70px;
 10 |     width: 70px;
 11 |     border-radius: 50%;
 12 | 
 13 |     
 14 | 
 15 | }
 16 | @keyframes outerlight {
 17 |     0%{
 18 |         background-color: #967532;
 19 |     }
 20 |     50%{
 21 |         background-color: #bdcf56;
 22 |     }
 23 | 
 24 |     100%{
 25 |         background-color: #e05539;
 26 |     }
 27 |     
 28 | }
 29 | .pumpkin{
 30 | 
 31 |     height: 100%;
 32 |     z-index: 10;
 33 |      position: relative;
 34 |      width: 120px;
 35 |      height: 100px;
 36 |      background-color: #f18b36;
 37 |      border-radius: 70px;
 38 |      margin: 2em auto;
 39 |      background-image: linear-gradient(
 40 |         to right, #f6ad60 50%,
 41 |          #f18b36 50%
 42 | 
 43 | 
 44 |      );
 45 |      box-shadow:-30px 0 0 0 #f38b36,
 46 |      -50px 0 0 0 #c95927,
 47 |      30px 0 0 0 #c95927,
 48 |      50px 0 0 0 #97441a;
 49 |      transform: scaleY(1.5);
 50 | 
 51 | }
 52 | .pumpkin::before{
 53 |     content: "";
 54 |     position: absolute;
 55 | 
 56 |     width: 11px;
 57 |     height: 25px;
 58 |     top:-25%;
 59 |     left: 41%;
 60 |     background-image: linear-gradient(-70deg,#967532 50%,
 61 |     transparent 50%);
 62 | }
 63 | .pumpkin::after{
 64 |     content: "";
 65 |     position: absolute;
 66 |     width: 11px;
 67 |     height: 25px;
 68 |     top:-25%;
 69 |     left: 50%;
 70 |     background-color: #7b6200;
 71 | }
 72 | .eye{
 73 | 
 74 |     width: 25px;
 75 |     height: 30px;
 76 |     background:#967532 ;
 77 |     position: absolute;
 78 |     top: 10px;
 79 |     right: 60%;
 80 |     border-radius: 100% 0 0 50%;
 81 |     box-shadow: inset 3px 5px 0 rgba(0 ,0, 0, 0.2);
 82 |     transition: rotate(-15deg);
 83 |     animation:eyeanim 3s infinite;
 84 | }
 85 | .eye::after{
 86 |     width: 25px;
 87 |     height: 30px;
 88 |     background:#967532 ;
 89 |     position: absolute;
 90 |     animation:eyeanim 3s infinite;
 91 |     right: 60%;
 92 |     border-radius: 100% 0 0 50%;
 93 |     box-shadow: inset 3px 5px 0 rgba(0 ,0, 0, 0.2);
 94 |     transform: translateX(63px) scaleX(-1) rotate(-30deg) translateY(2px);
 95 |     content: "";
 96 | }
 97 | .mouth{
 98 |     position: absolute;
 99 |     animation: hasna 0.7s infinite;
100 |     width: 90px;
101 |     height: 30px;
102 |     background-color: #967532;
103 |     top: 55%;
104 |     left: 50%;
105 |     transform: translateX(-50%);
106 |     border-radius: 0 0 30px 30px;
107 |     box-shadow:inset 4px 4px 0px rgba(0,0,0,0.2);
108 | 
109 | }
110 | .mouth::before{
111 |     content: "";
112 |     position: absolute;
113 |     top:0;
114 |     left: 24%;
115 |     width: 1px;
116 |     height: 1px;
117 | 
118 |     border-left: 6px solid transparent;
119 |     border-right: 6px solid transparent;
120 |     border-top: 13px solid #f6ad60;
121 |     ;
122 | 
123 | }
124 | .mouth::after{
125 |     content: "";
126 |     position: absolute;
127 |     top:0;
128 |     right: 24%;
129 |     width: 1px;
130 |     height: 1px;
131 | 
132 |     border-left: 6px solid transparent;
133 |     border-right: 6px solid transparent;
134 |     border-top: 13px solid #f18b36;
135 |     ;
136 | 
137 | }
138 | .eye, .eye::after {
139 |  animation:eyeanim 3s infinite;
140 | }
141 | @keyframes eyeanim{
142 |     0%{
143 |        background:#a24d13 ;
144 |      }
145 |      50%{
146 |         height: 1.5em;
147 |      }
148 |      20%{
149 |         background: #967532;
150 |      }
151 |     
152 | }
153 | @keyframes hasna {
154 |     50%{
155 |        height: 1.5em;
156 |        background-color: #a24d13;
157 |     }
158 |     
159 | }
160 | 
161 | 
162 | #container {
163 |     width: 400px;
164 |     height: 400px;
165 |     margin-top: -15%;
166 |     box-sizing: border-box;
167 |   
168 |     margin-left: 10%;
169 |   }
170 |   #container1 {
171 |     width: 400px;
172 |     height: 400px;
173 |     margin-top: -35%;
174 |     box-sizing: border-box;
175 |     margin-left: 60%;
176 | 
177 |   }
178 |   
179 |   *:after,
180 |   *:before {
181 |     
182 |     box-sizing: inherit;
183 |   }
184 |   
185 |   /*body positiong*/
186 |   #ghost {
187 |     margin: 10% auto;
188 |     width: 70%;
189 |     height: 70%;
190 |     animation: floaty 2s infinite;
191 |   }
192 |   
193 |   /*ghost body*/
194 |   #ghost #body {
195 |     
196 |     position: relative;
197 |     margin: 50px auto 0;
198 |     width: 180px;
199 |     height: 220px;
200 |     background: white;
201 |     border-top-left-radius: 90px;
202 |     border-top-right-radius: 90px;
203 |     
204 |   }
205 |   
206 |   /*ghost arms*/
207 |   #ghost #body:before, 
208 |   #ghost #body:after {
209 |     content: '';
210 |     position: absolute;
211 |     top: 130px;
212 |     display: inline-block;
213 |     width: 36px;
214 |     height: 36px;
215 |     border-radius: 50%;
216 |     background:white;
217 |     animation: floaty .2s infinite;
218 |     
219 |   
220 |   
221 |   }
222 |   /*left arm*/
223 |   #ghost #body:before{
224 |     left: -18px;
225 |   }
226 |   /*right arm*/
227 |   #ghost #body:after{
228 |     right: -18px;
229 |   }
230 |   /*eyes*/
231 |   #ghost #body #eyes {
232 |     display: flex;
233 |     justify-content: space-between;
234 |     margin: 0 auto;
235 |     padding: 90px 0 0;
236 |     width: 80px;
237 |     height: 20px;
238 |   }
239 |   /*eyes*/
240 |   #ghost #body #eyes:before, 
241 |   #ghost #body #eyes:after {
242 |     content: '';
243 |     display: block;
244 |     width: 30px;
245 |     height: 20px;
246 |     background: black;
247 |     border-radius: 50%;
248 |     
249 |   }
250 |   /*mouth*/
251 |   #ghost #body #mouth {
252 |     background: black;
253 |     margin: 25px auto 0;
254 |     width: 60px;
255 |     height: 30px;
256 |     border-bottom-left-radius: 60px;
257 |     border-bottom-right-radius: 30px;
258 |     
259 |   }
260 |   /* ghost legs*/
261 |   #ghost #body #mouth:before{
262 |     content: '';
263 |     display: block;
264 |     background: f2bf1;
265 |     margin-left: 20px;
266 |     width: 10px;
267 |     height: 10px;
268 |    
269 |   }
270 |   
271 |   #ghost #body #feet {
272 |     position: absolute;
273 |     display: flex;
274 |     bottom: -18px;
275 |     width: 180px;
276 |     height: 36px;
277 |     left: .5px;
278 |   }
279 |   
280 |   /*ghost feet*/
281 |   #ghost #body #feet > * ,
282 |   #ghost #body #feet:before ,
283 |   #ghost #body #feet:after {
284 |     
285 |     content: '';
286 |     width: 36px;
287 |     height: 36px;
288 |     background:black;
289 |     border-radius: 50%;  
290 |   }
291 |   
292 |   @keyframes floaty {
293 |     0%, 100% {
294 |       transform: translateY(0);
295 |       
296 |     }
297 |     50%{
298 |       transform: translateY(-20px);
299 |     }
300 |   }
301 |  
302 |   @keyframes zoomy {
303 |     0%, 100% {
304 |       transform: scale(1);
305 |     }
306 |     50% {
307 |       transform: scale(0.8);
308 |     }
309 |   }


--------------------------------------------------------------------------------
/PUMPKIN/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Pumpkin</title>
 8 |     <link rel="stylesheet" href="index.css">
 9 | </head>
10 | <body>
11 |     <div id="outer">    </div>
12 |     <div class="pumpkin">
13 |      <div class="eye"></div>
14 |      <div class="mouth"></div>
15 |     </div>
16 | 
17 |     <div id="container">
18 |         <div id="ghost">
19 |           <div id="body">
20 |             <div id="eyes">
21 |               <div id="mouth">
22 |                 <div id="feet">
23 |                   <div></div>
24 |                   <div></div>
25 |                   <div></div>
26 |                 </div>
27 |               </div>
28 |             </div>
29 |           </div>
30 |         </div>
31 |         <div id="shadow"></div>
32 |       </div>
33 | 
34 |       <div id="container1">
35 |         <div id="ghost">
36 |           <div id="body">
37 |             <div id="eyes">
38 |               <div id="mouth">
39 |                 <div id="feet">
40 |                   <div></div>
41 |                   <div></div>
42 |                   <div></div>
43 |                 </div>
44 |               </div>
45 |             </div>
46 |           </div>
47 |         </div>
48 |         <div id="shadow"></div>
49 |       </div>
50 | 
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Canvas_javascript
 2 | let's learn about canvas API
 3 | <h1>Canvas</h1>
 4 | <p>The Canvas API provides a means for drawing graphics via JavaScript and the HTML</p>
 5 | 
 6 | <h2>What p5.js Is ?</h2>
 7 | <hr/>
 8 | <h2>Hello!</h2>
 9 | <p>
10 | p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.
11 | 
12 | Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.</p>
13 | 
14 | <h3>Coming about p5 shaps</h3>
15 | . rect(x,y,height,width)<br/>
16 | . ellipse(x,y,height,width)<br/>
17 | . line(x1,y1,x2,y2)<br/>
18 | . arc(x,y,height,width)<br/>
19 | . point(x,y,height,width)<br/>


--------------------------------------------------------------------------------
/SHEEP/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>sheep</title>
  8 |     <style>
  9 |         *{
 10 |             padding: 0;
 11 |             margin: 0;
 12 |             box-sizing: border-box;
 13 |         }
 14 |         body{
 15 |             background-color:lightgreen;
 16 |         }
 17 |         .container{
 18 |             height: 500px;
 19 |             width: 500px;
 20 |             /* border: 1px solid black; */
 21 |             position: absolute;
 22 |             transform: translate(-50%, -50%);
 23 |             top:50%;
 24 |             left: 50%;
 25 |         }
 26 |         .body{
 27 |             height: 240px;
 28 |             width: 240px;
 29 |             background-color: #ffffff;
 30 |             border-radius: 50%;
 31 |             position: absolute;
 32 |             margin: auto;
 33 |             left: 0;
 34 |             right: 0;
 35 |             top:100px;
 36 | 
 37 | 
 38 |         }
 39 |         .body:before{
 40 |             content: "";
 41 |             position: absolute;
 42 |             height: 75.5px;
 43 |             width: 75.5px;
 44 |             background-color:#ffffff;
 45 |             border-radius: 50%;
 46 |             left:80px;
 47 |          top:-25px;
 48 |         box-shadow: 0 215px #ffffff,
 49 |         107px 107px #ffffff,
 50 |         -107px 107px #ffffff,
 51 |     -50px 15px #ffffff ,
 52 |     50px 15px #ffffff,
 53 |      -88px 50px #ffffff,
 54 |     88px 50px #ffffff,
 55 |     -50px 200px #ffffff,
 56 |     50px 200px #ffffff,
 57 |     -88px 160px #ffffff,
 58 |       88px 160px #ffffff;
 59 |             }
 60 |             .face{
 61 |                 background-color: #505050;
 62 |                 width: 80px;
 63 |                 height: 100px;
 64 |                 position: absolute;
 65 |                 margin: auto;
 66 |                 left: 0;
 67 |                 right: 0;
 68 |                 top:70px;
 69 |                 border-radius: 30px;
 70 |             }
 71 |             .ears{
 72 |                 position: absolute;
 73 |                 background-color: #303030;
 74 |                 height: 50px;
 75 |                 width: 50px;
 76 |                 border-radius: 45px 0;
 77 |                 top:0;
 78 |                 left: -40px;
 79 | 
 80 |             }
 81 |             .ears:before{
 82 |                 position: absolute;
 83 |                 content: "";
 84 |                 background-color: #303030;
 85 |                 height: 50px;
 86 |                 width: 50px;
 87 |                 border-radius: 0 45px;
 88 |                 top:0;
 89 |                 left:110px;
 90 | 
 91 |             }
 92 |             .eyes{
 93 |                 position: absolute;
 94 |                 background-color: #252525;
 95 |                 height: 10px;
 96 |                 width: 10px;
 97 |                 left:10px;
 98 |                 top:5px;
 99 |                 border-radius: 50%;
100 |                 box-shadow: 0 0 0 15px #ffffff,
101 |                 0 0 0 20px #505050;
102 | 
103 |             }
104 |             .eyes:before{
105 |                 position: absolute;
106 |                 content: "";
107 |                 background-color: #252525;
108 |                 height: 10px;
109 |                 width: 10px;
110 |                 left:47px;
111 |                
112 |                 border-radius: 50%;
113 |                 box-shadow: 0 0 0 15px #ffffff,
114 |                 0 0 0 20px #505050;
115 | 
116 |             }
117 |         .nose{
118 |               position: absolute;
119 |               background-color: #404040;
120 |               width:10px;
121 |               width: 16px;
122 |               left: 32px;
123 |               top:60px;
124 |               border-radius: 3px 3px 0 0 ;
125 |               border-bottom: 3.5px solid #252525;
126 |         }
127 |         .nose:before{
128 |             content: "";
129 |             position: absolute;
130 |             height: 6px;
131 |             width: 5px;
132 |             background-color:#252525;
133 |             left: 6.5px;
134 |             top:10px;
135 | 
136 |         }
137 |         .legs{
138 |              position: absolute;
139 |              background-color: #505050;
140 |              height: 80px;
141 |              width: 20px;
142 |              left: 180px;
143 |              top:310px;
144 |              box-shadow: 110px 0 #505050;
145 | 
146 |         }
147 | 
148 |     </style>
149 | </head>
150 | <body>
151 |     <div class="container">
152 |         <div class="legs"></div>
153 |         <div class="body">
154 |       <div class="face">
155 |         <div class="ears"></div>
156 |         <div class="eyes"></div>
157 | <div class="nose"></div>
158 |       </div>
159 |         </div>
160 |     </div>
161 |     <div class="shadow"></div>
162 |     
163 | </body>
164 | </html>


--------------------------------------------------------------------------------
/bird/index.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *:before,
  3 | *:after {
  4 |   padding: 0;
  5 |   margin: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | body {
  9 |   background-color: #49befe;
 10 | }
 11 | .container {
 12 |   height: 550px;
 13 |   width: 100vw;
 14 |   z-index: 1;
 15 |   overflow: hidden;
 16 |   position: absolute;
 17 |   margin: auto;
 18 |   left: 0;
 19 |   right: 0;
 20 |   top: 0;
 21 |   bottom: 0;
 22 | }
 23 | .container1 {
 24 |     height: 550px;
 25 |     width: 100vw;
 26 |     z-index: 1;
 27 |     overflow: hidden;
 28 |     position: absolute;
 29 |     
 30 |     left: -300px;
 31 |     right: 0;
 32 |     top: 0;
 33 |     bottom: 0;
 34 |   }
 35 | .chick {
 36 |   position: absolute;
 37 |   height: 300px;
 38 |   width: 80px;
 39 |   margin: auto;
 40 |   left: 0;
 41 |   right: 0;
 42 |   top: 260px;
 43 | }
 44 | .body {
 45 |   position: absolute;
 46 |   height: 65px;
 47 |   width: 100px;
 48 |   background-color: #ffec02;
 49 |   border-radius: 100px 100px 0 0;
 50 |   top: -2px;
 51 |   animation: body-walk 0.8s infinite;
 52 | }
 53 | @keyframes body-walk {
 54 |   50% {
 55 |     top: 7px;
 56 |   }
 57 | }
 58 | .body:before {
 59 |   content: "";
 60 |   position: absolute;
 61 |   height: 80px;
 62 |   width: 150px;
 63 |   background-color: #ffec02;
 64 |   top: 65px;
 65 |   right: 0;
 66 |   border-radius: 15px 0 150px 150px;
 67 | }
 68 | .wing {
 69 |   height: 37px;
 70 |   width: 74px;
 71 |   background-color: #ffce00;
 72 |   position: absolute;
 73 |   top: 55px;
 74 |   left: -40px;
 75 |   border-radius: 10px 10px 74px 74px;
 76 |   transform-origin: right;
 77 |   animation: wing 1s infinite;
 78 | }
 79 | @keyframes wing {
 80 |   50% {
 81 |     transform: rotate(10deg);
 82 |   }
 83 | }
 84 | .beak {
 85 |   position: absolute;
 86 |   background-color: #f17c00;
 87 |   height: 40px;
 88 |   width: 40px;
 89 |   border-radius: 5px;
 90 |   top: 30px;
 91 |   left: 68px;
 92 |   transform: skewX(30deg) rotate(-25deg);
 93 |   z-index: -1;
 94 | }
 95 | .left-leg,
 96 | .right-leg {
 97 |   height: 50px;
 98 |   width: 13px;
 99 |   background-color: #f17c00;
100 |   position: absolute;
101 |   top: 100px;
102 |   left: 35px;
103 |   transform-origin: top;
104 |   transform: rotate(-45deg);
105 |   animation: walk 1s infinite;
106 |   z-index: -1;
107 | }
108 | .left-leg:before,
109 | .right-leg:before {
110 |   content: "";
111 |   position: absolute;
112 |   height: 13px;
113 |   width: 40px;
114 |   background-color: #f17c00;
115 |   right: -20px;
116 |   top: 50px;
117 |   border-radius: 40px;
118 | }
119 | .right-leg {
120 |   animation-delay: 0.5s;
121 | }
122 | @keyframes walk {
123 |   33.33% {
124 |     transform: translateY(20px) rotate(0deg);
125 |   }
126 |   66.66% {
127 |     transform: translate(-25px, 10px) rotate(30deg);
128 |   }
129 | }
130 | .eye {
131 |   background-color: #1c1c1c;
132 |   height: 20px;
133 |   width: 20px;
134 |   position: absolute;
135 |   top: 32px;
136 |   left: 65px;
137 |   border-radius: 20px;
138 |   transform-origin: bottom;
139 |   animation: blink 2.5s infinite;
140 | }
141 | @keyframes blink {
142 |   30% {
143 |     height: 1px;
144 |     top: 40px;
145 |   }
146 | }
147 | .blush {
148 |   background-color: rgba(201, 223, 122, 0.5);
149 |   position: absolute;
150 |   height: 15px;
151 |   width: 15px;
152 |   border-radius: 50%;
153 |   top: 48px;
154 |   left: 46px;
155 | }
156 | .feather {
157 |   height: 35px;
158 |   width: 12px;
159 |   border-radius: 35px;
160 |   background-color: #ffec02;
161 |   position: absolute;
162 |   left: 30px;
163 |   top: -20px;
164 |   transform: rotate(-15deg);
165 | }
166 | .feather:before {
167 |   content: "";
168 |   position: absolute;
169 |   height: 25px;
170 |   width: 12px;
171 |   background-color: #ffec02;
172 |   top: 5px;
173 |   left: 10px;
174 |   border-radius: 25px;
175 |   transform: rotate(25deg);
176 | }
177 | .shadow {
178 |   background-color: #39a4f0;
179 |   height: 18px;
180 |   width: 110px;
181 |   position: absolute;
182 |   bottom: 99px;
183 |   margin: auto;
184 |   left: 0;
185 |   right: 0;
186 |   z-index: -2;
187 |   border-radius: 20px;
188 |   animation: shadow 1s infinite;
189 | }
190 | @keyframes shadow {
191 |   50% {
192 |     transform: scaleX(1.13);
193 |   }
194 | }
195 | .cloud {
196 |   background-color: #ffffff;
197 |   height: 35px;
198 |   width: 120px;
199 |   border-radius: 120px;
200 |   position: absolute;
201 |   z-index: -3;
202 |   right: -130px;
203 | }
204 | .cloud:before {
205 |   position: absolute;
206 |   content: "";
207 |   background-color: #ffffff;
208 |   height: 65px;
209 |   width: 65px;
210 |   border-radius: 50%;
211 |   bottom: 10px;
212 |   left: 15px;
213 | }
214 | .cloud:after {
215 |   position: absolute;
216 |   content: "";
217 |   background-color: #ffffff;
218 |   height: 45px;
219 |   width: 45px;
220 |   border-radius: 50%;
221 |   bottom: 10px;
222 |   right: 10px;
223 | }
224 | .cloud1 {
225 |   top: 240px;
226 |   animation: cloud 10s 18px infinite linear;
227 | }
228 | .cloud2 {
229 |   top: 160px;
230 |   animation: cloud 10s infinite linear;
231 | }
232 | .cloud3 {
233 |   top: 60px;
234 |   animation: cloud 10s 5s infinite linear;
235 | }
236 | .cloud4 {
237 |   top: 300px;
238 |   animation: cloud 10s 12s infinite linear;
239 | }
240 | @keyframes cloud {
241 |   100% {
242 |     transform: translateX(calc(-100vw - 130px));
243 |   }
244 | }
245 | 
246 | 
247 | .body1 {
248 |     position: absolute;
249 |     height: 65px;
250 |     width: 100px;
251 |     background-color: #ed8cc8;
252 |     border-radius: 100px 100px 0 0;
253 |     top: -2px;
254 |     animation: body-walk 0.8s infinite;
255 |   }
256 |   @keyframes body-walk {
257 |     50% {
258 |       top: 7px;
259 |     }
260 |   }
261 |   .body1:before {
262 |     content: "";
263 |     position: absolute;
264 |     height: 80px;
265 |     width: 150px;
266 |     background-color:#ed8cc8;
267 |     top: 65px;
268 |     right: 0;
269 |     border-radius: 15px 0 150px 150px;
270 |   }
271 |   .wing1{
272 |     height: 37px;
273 |     width: 74px;
274 |     background-color:#ed8cc8;
275 |     position: absolute;
276 |     top: 55px;
277 |     left: -40px;
278 |     border-radius: 10px 10px 74px 74px;
279 |     transform-origin: right;
280 |     animation: wing 1s infinite;
281 |   }
282 |   @keyframes wing {
283 |     50% {
284 |       transform: rotate(10deg);
285 |     }
286 |   }


--------------------------------------------------------------------------------
/bird/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Bird</title>
 8 |     <link rel="stylesheet" href="index.css">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <div class="chick">
13 |           <div class="body">
14 |             <div class="wing"></div>
15 |             <div class="beak"></div>
16 |             <div class="eye"></div>
17 |             <div class="blush"></div>
18 |             <div class="feather"></div>
19 |           </div>
20 |           <div class="left-leg"></div>
21 |           <div class="right-leg"></div>
22 |         </div>
23 |         <div class="shadow"></div>
24 |         <div class="cloud cloud1"></div>
25 |         <div class="cloud cloud2"></div>
26 |         <div class="cloud cloud3"></div>
27 |         <div class="cloud cloud4"></div>
28 |       </div>
29 | 
30 |       <div class="container1">
31 |         <div class="chick">
32 |           <div class="body1">
33 |             <div class="wing1"></div>
34 |             <div class="beak"></div>
35 |             <div class="eye"></div>
36 |             <div class="blush"></div>
37 |             <div class="feather1"></div>
38 |           </div>
39 |           <div class="left-leg"></div>
40 |           <div class="right-leg"></div>
41 |         </div>
42 |         <div class="shadow"></div>
43 |         <div class="cloud cloud1"></div>
44 |         <div class="cloud cloud2"></div>
45 |         <div class="cloud cloud3"></div>
46 |         <div class="cloud cloud4"></div>
47 |       </div>
48 | 
49 |     
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/cake.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <style>
  9 |         @import url(https://fonts.googleapis.com/css?family=Lato:300italic);
 10 | 
 11 | html,
 12 | body {
 13 |   width: 100%;
 14 |   height: 100%;
 15 | }
 16 | 
 17 | body {
 18 |   background: #ee9ca7;
 19 | }
 20 | 
 21 | #cake {
 22 |   display: block;
 23 |   position: relative;
 24 |   margin: -10em auto 0 auto;
 25 | }
 26 | 
 27 | /* ============================================== Candle
 28 | */
 29 | 
 30 | .velas {
 31 |   background: #ffffff;
 32 |   border-radius: 10px;
 33 |   position: absolute;
 34 |   top: 228px;
 35 |   left: 50%;
 36 |   margin-left: -2.4px;
 37 |   margin-top: -8.33333333px;
 38 |   width: 5px;
 39 |   height: 35px;
 40 |   transform: translateY(-300px);
 41 |   backface-visibility: hidden;
 42 |   animation: in 500ms 6s ease-out forwards;
 43 | }
 44 | .velas:after,
 45 | .velas:before {
 46 |   background: rgba(255, 0, 0, 0.4);
 47 |   content: "";
 48 |   position: absolute;
 49 |   width: 100%;
 50 |   height: 2.22222222px;
 51 | }
 52 | .velas:after {
 53 |   top: 25%;
 54 |   left: 0;
 55 | }
 56 | .velas:before {
 57 |   top: 45%;
 58 |   left: 0;
 59 | }
 60 | 
 61 | /* ============================================== Fire
 62 | */
 63 | 
 64 | .fuego {
 65 |   border-radius: 100%;
 66 |   position: absolute;
 67 |   top: -20px;
 68 |   left: 50%;
 69 |   margin-left: -2.6px;
 70 |   width: 6.66666667px;
 71 |   height: 18px;
 72 | }
 73 | .fuego:nth-child(1) {
 74 |   animation: fuego 2s 6.5s infinite;
 75 | }
 76 | .fuego:nth-child(2) {
 77 |   animation: fuego 1.5s 6.5s infinite;
 78 | }
 79 | .fuego:nth-child(3) {
 80 |   animation: fuego 1s 6.5s infinite;
 81 | }
 82 | .fuego:nth-child(4) {
 83 |   animation: fuego 0.5s 6.5s infinite;
 84 | }
 85 | .fuego:nth-child(5) {
 86 |   animation: fuego 0.2s 6.5s infinite;
 87 | }
 88 | 
 89 | /* ============================================== Animation Fire
 90 | */
 91 | 
 92 | @keyframes fuego {
 93 |   0%, 100% {
 94 |     background: rgba(254, 248, 97, 0.5);
 95 |     box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
 96 |     transform: translateY(0) scale(1);
 97 |   }
 98 |   50% {
 99 |     background: rgba(255, 50, 0, 0.1);
100 |     box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
101 |     transform: translateY(-20px) scale(0);
102 |   }
103 | }
104 | 
105 | @keyframes in {
106 |   to {
107 |     transform: translateY(0);
108 |   }
109 | }
110 | 
111 | .text {
112 |   color: #8b6a60;
113 |   font-family: 'Lato', sans-serif;
114 |   font-weight: 300;
115 |   font-style:italic;
116 |   text-align: center;
117 |   h1 {
118 |     font-size: 1.4em;
119 |   }
120 | }
121 |     </style>
122 | </head>
123 | <body>
124 | 
125 | 
126 | <div class="velas">
127 |     <div class="fuego"></div>
128 |     <div class="fuego"></div>
129 |     <div class="fuego"></div>
130 |     <div class="fuego"></div>
131 |     <div class="fuego"></div>
132 | </div>
133 | <svg id="cake" version="1.1" x="0px" y="0px" width="200px" height="500px" viewBox="0 0 200 500" enable-background="new 0 0 200 500" xml:space="preserve">
134 |     <path fill="#a88679" d="M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
135 | 		c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z">
136 |         <animate id="bizcocho_3" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1" begin="relleno_2.end" dur="0.3s" fill="freeze" values="
137 |                           M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
138 | 		c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z
139 |                           ;
140 |                           M173.667,411.567c-47.995,12.408-102.955,12.561-147.334,0
141 | 		c-3.848-1.089-0.189-16.089,3.661-15.002c44.836,12.66,90.519,12.753,139.427,0.07
142 | 		C173.293,395.631,177.541,410.566,173.667,411.567z
143 |                           ;
144 |                           M173.667,427.569c-49.795,0-101.101,0-147.334,0c-3.999,0-4-16.002,0-16.002
145 | 		c46.385,0,97.539,0,147.334,0C177.668,411.567,177.667,427.569,173.667,427.569z
146 |                           " />
147 |     </path>
148 |     <path fill="#8b6a60" d="M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
149 | 		c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607c0-19.144,0-57.432,0-76.575c0-11.057,0-44.226,0-44.226C96.636-177.015,98.142-178.521,100-178.521
150 | 		L100-178.521z">
151 |         <animate id="relleno_2" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 0.58 1" begin="bizcocho_2.end" dur="0.5s" fill="freeze" values="
152 |                           M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
153 | 		c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607c0-19.144,0-57.432,0-76.575c0-11.057,0-44.226,0-44.226C96.636-177.015,98.142-178.521,100-178.521
154 | 		L100-178.521z
155 |                           ;
156 |                           M100,267.257c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
157 | 		c0,19.143,0,57.43,0,76.574c0,10.151,0,40.606,0,40.606c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364
158 | 		c0,0,0-30.455,0-40.606c0-19.145,0-57.432,0-76.576c0-11.057,0-44.225,0-44.225C96.636,268.763,98.142,267.257,100,267.257
159 | 		L100,267.257z
160 |                           ;
161 |                           M93.928,405.433c-0.655,6.444-0.102,9.067,2.957,11.798c0,0,8.083,5.571,16.828,3.503
162 | 		c18.629-4.406,43.813,6.194,50.792,7.791c14.75,3.375,9.162,6.867,9.162,6.867c-2.412,2.258-58.328,0-73.667,0l0,0
163 | 		c-1.858,0-69.995,2.133-73.667,0c0,0-3.337-2.439,6.172-5.992c11.375-4.25,52.875,8.822,47.139-9.442
164 | 		c-6.333-20.167,5.226-21.514,5.226-21.514c3.435-0.915,12.78-6.663,10.923-0.546L93.928,405.433z
165 |                           ;
166 |                           M102.242,427.569c5.348,0,14.079,0,17.462,0c0,0,17.026,0,27.504,0
167 | 		c19.143,0,20.39-3.797,26.459,0c3,1.877,0,7.823,0,7.823c-2.412,2.258-58.328,0-73.667,0l0,0c-1.858,0-67.187,0-73.667,0
168 | 		c0,0-4.125-4.983,0-7.823c5.201-3.58,16.085,0,23.725,0c8.841,0,20.762,0,20.762,0c3.686,0,8.597,0,19.511,0H102.242z
169 |                           " />
170 |     </path>
171 |     <path fill="#a88679" d="M173.667-15.929c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002
172 | 		c43.566,0,97.96,0,147.334,0C177.667-31.931,177.666-15.929,173.667-15.929z">
173 |         <animate id="bizcocho_2" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0.25 0 0.58 1" begin="relleno_1.end" dur="0.5s" fill="freeze" values="
174 |                           M173.667-15.929c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002
175 | 		c43.566,0,97.96,0,147.334,0C177.667-31.931,177.666-15.929,173.667-15.929z
176 |                           ;
177 |                           M173.434,445.393c-47.269,8.001-105.245,8.001-147.334,0c-3.929-0.747-0.692-16.543,3.243-15.824
178 | 		c43.828,8.001,92.165,8.001,140.739,0C174.029,428.918,177.377,444.726,173.434,445.393z
179 |                           ;
180 |                           M173.667,449.514c-47.576-5.454-102.799-5.744-147.333,0c-3.966,0.512-3.938-15.297,0-16.002
181 | 		c43.683-7.823,97.646-8.026,147.333,0C177.616,434.15,177.642,449.969,173.667,449.514z
182 |                           ;
183 |                           M173.667,451.394c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
184 | 		c44.697,0,96.586,0,147.334,0C177.667,435.392,177.668,451.394,173.667,451.394z
185 |                           " />
186 |     </path>
187 |     <path fill="#8b6a60" d="M101.368-73.685c0,12.164,0,15.18,0,28.519c0,22.702,0-13.661,0,8.304c0,14.48,0,18.233,0,30.512
188 | 		c0,1.753-2.958,1.847-2.958,0c0-12.68,0-16.277,0-30.401c0-21.983,0,11.66,0-8.305c0-13.027,0-15.992,0-28.628
189 | 		C98.411-75.883,101.368-75.592,101.368-73.685z">
190 |         <animate id="relleno_1" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 0.6 1" begin="bizcocho_1.end" dur="0.5s" fill="freeze" values="
191 |                           M101.368-73.685c0,12.164,0,15.18,0,28.519c0,22.702,0-13.661,0,8.304c0,14.48,0,18.233,0,30.512
192 | 		c0,1.753-2.958,1.847-2.958,0c0-12.68,0-16.277,0-30.401c0-21.983,0,11.66,0-8.305c0-13.027,0-15.992,0-28.628
193 | 		C98.411-75.883,101.368-75.592,101.368-73.685z
194 |                           ;
195 |                           M101.368,350.885c0,12.164,0,65.18,0,78.518c0,22.703,0-33.66,0-11.695c0,14.48,0,28.232,0,40.512
196 | 		c0,1.753-2.958,1.847-2.958,0c0-12.68,0-26.277,0-40.402c0-21.982,0,31.66,0,11.695c0-13.027,0-65.992,0-78.627
197 | 		C98.411,348.686,101.368,348.977,101.368,350.885z
198 |                           ;
199 |                           M128.38,447.567c37.626,6.312,39.303,13.658,26.833,12.833c-22.653-1.499-13.636-0.831-23.302-0.831
200 | 		c-14.48,0-17.884,0-30.163,0c-2.087,0-2.068,0-3.915,0c-13.333,0-8.963,0-23.088,0c-11.668,0-14.062,5.995-27.532,1.164
201 | 		c-12.629-4.529,38.667-3.167,46.833-17.333C100.077,432.94,105.546,443.736,128.38,447.567z
202 |                           ;
203 |                           M173.667,451.394c2.875,0,2.997,9.257,0,9.131c-22.662-0.956-32.09-0.956-41.756-0.956
204 | 		c-14.48,0-17.884,0-30.163,0c-2.087,0-2.068,0-3.915,0c-13.333,0-8.963,0-23.088,0c-11.668,0-34.99-0.294-48.412,1.831
205 | 		c-4.109,0.65-3.01-10.006,0-10.006C37.129,451.394,149.379,451.394,173.667,451.394z
206 |                           " />
207 |     </path>
208 |     <path fill="#a88679" d="M173.667,21.571c-33.174,0-111.467,0-147.334,0c-4,0-4-16.002,0-16.002c39.836,0,105.982,0,147.334,0
209 | 		C177.668,5.569,177.667,21.571,173.667,21.571z">
210 |         <animate id="bizcocho_1" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0.25 0 1 1; 0 0 1 1; 0.25 0 0.6 1" begin="2s" dur="0.8s" fill="freeze" values="
211 |                           M173.667,21.571c-33.174,0-111.467,0-147.334,0c-4,0-4-16.002,0-16.002c39.836,0,105.982,0,147.334,0
212 | 		C177.668,5.569,177.667,21.571,173.667,21.571z
213 |                           ;
214 |                           M173.667,459.569c-33.197,16.002-110.782,16.002-147.334,0c-3.664-1.604,1.614-15.617,5.337-14.153
215 | 		c40.702,16.002,94.289,16.104,136.505,0.103C171.917,444.1,177.271,457.832,173.667,459.569z
216 |                           ;
217 |                           M171.817,475.571c-39.361-3.001-105.438-2.571-143.556,0c-3.991,0.27-7.377-14.736-3.387-15.014
218 | 		c41.553-2.888,104.421-3.121,150.51-0.233C179.378,460.574,175.806,475.875,171.817,475.571z
219 |                           ;
220 |                           M171.817,459.564c-38.8-12.188-104.504-13.762-143.556,0c-3.772,1.329-7.961-12.604-4.178-13.905
221 | 		c40.864-14.064,105.114-15.52,151.918-0.973C179.822,445.874,175.634,460.762,171.817,459.564z
222 |                           ;
223 |                           M173.667,475.571c-46.376-5.005-105.924-4.003-147.334,0c-3.981,0.385-3.479-15.421,0.479-16.002
224 | 		c43.087-6.327,97.705-7.083,146.855,0.438C177.621,460.613,177.644,476,173.667,475.571z
225 |                           ;
226 |                           M173.667,474.117c-46.376,1.866-105.638,2.01-147.334,0c-3.995-0.192-3.52-16.144,0.479-16.002
227 | 		c43.794,1.55,96.341,1.541,145.723,0C176.532,457.99,177.663,473.956,173.667,474.117z
228 |                           ;
229 |                           M173.667,475.571c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002c43.566,0,97.96,0,147.334,0
230 | 		C177.667,459.569,177.666,475.571,173.667,475.571z
231 |                           " />
232 |     </path>
233 |     <path fill="#fefae9" d="M104.812,113.216c0,3.119-2.164,5.67-4.812,5.67c-2.646,0-4.812-2.551-4.812-5.67c0-5.594,0-16.782,0-22.375
234 | 	c0-5.143,0-15.427,0-20.568c0-7.333,0-21.998,0-29.33c0-5.523,0-16.569,0-22.092c0-3.295,0-9.885,0-13.181
235 | 	C95.188,2.551,97.353,0,100,0c2.648,0,4.812,2.551,4.812,5.669c0,3.248,0,9.743,0,12.991c0,5.428,0,16.284,0,21.711
236 | 	c0,7.618,0,22.854,0,30.472c0,4.952,0,14.854,0,19.807C104.812,96.292,104.812,107.576,104.812,113.216z">
237 |         <animate id="crema" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0.25 0 1 1; 0 0 1 1; 0 0 0.58 1" begin="bizcocho_3.end" dur="2s" fill="freeze" values="
238 |                           M104.812,113.216c0,3.119-2.164,5.67-4.812,5.67c-2.646,0-4.812-2.551-4.812-5.67c0-5.594,0-16.782,0-22.375
239 | 	c0-5.143,0-15.427,0-20.568c0-7.333,0-21.998,0-29.33c0-5.523,0-16.569,0-22.092c0-3.295,0-9.885,0-13.181
240 | 	C95.188,2.551,97.353,0,100,0c2.648,0,4.812,2.551,4.812,5.669c0,3.248,0,9.743,0,12.991c0,5.428,0,16.284,0,21.711
241 | 	c0,7.618,0,22.854,0,30.472c0,4.952,0,14.854,0,19.807C104.812,96.292,104.812,107.576,104.812,113.216z
242 |                           ;
243 |                           M104.812,405.897c0,3.119-2.164,5.67-4.812,5.67c-2.646,0-4.812-2.551-4.812-5.67c0-5.594,0-16.782,0-22.376
244 | 	c0-5.143,0-15.426,0-20.568c0-7.332,0-21.997,0-29.33c0-5.522,0-16.568,0-22.092c0-3.295,0-9.885,0-13.181
245 | 	c0-3.118,2.165-5.669,4.812-5.669c2.648,0,4.812,2.551,4.812,5.669c0,3.247,0,9.743,0,12.991c0,5.428,0,16.283,0,21.711
246 | 	c0,7.618,0,22.854,0,30.473c0,4.951,0,14.854,0,19.807C104.812,388.972,104.812,400.256,104.812,405.897z
247 |                           ;
248 |                           M111.873,411.567c-3.119,0-9.226,0-11.874,0c-2.646,0-7.748,0-10.867,0c-7.086,0-12.698,0-18.292,0
249 | 	c-6.592,0-12.871,7.371-19.166,3.008c-10.043-6.961-7.776-10.169,2.991-17.745c12.61-8.873,27.713,1.994,25.919-7.531
250 | 	c-2.589-13.742,11.008-14.513,11.365-17.789c0.441-4.051,4.235-11.107,8.051-8.175c3.113,2.393,1.007,8.008,0,13.159
251 | 	c-1.871,9.569,8.058,2.113,9.494,14.155c2.592,21.732,21.184-0.675,29.309,7.976c5.216,5.553,18.413,5.552,15.426,12.942
252 | 	c-3.131,7.745-15.825-4.369-23.8,2.903C126.261,418.271,118.301,411.567,111.873,411.567z
253 |                           ;
254 |                           M111.873,411.567c-3.119,0-9.226,0-11.874,0c-2.646,0-9.734,4.069-12.853,4.069
255 | 	c-7.086,0-10.712-4.069-16.306-4.069c-6.592,0-12.12,6.013-19.166,3.008c-7.053-3.008-7.458,2.026-18.659,1.165
256 | 	c-6.832-0.525-7.522-3.034-7.533-6.265c-0.037-10.336,22.073-2.452,36.613-2.628c10.234-0.124,19.856-1.439,37.905-2.102
257 | 	c16.642-0.61,32.699,1.552,46.009,1.927c12.438,0.351,29.663-8.99,31.532,3.315c0.773,5.093-5.605,3.342-11.211,9.579
258 | 	c-5.093,5.667-7.59-4.605-12.965-3.832c-8.269,1.189-14.962-8.537-22.937-1.265C126.261,418.271,118.301,411.567,111.873,411.567z
259 |                           ;
260 |                           M110.946,413.652c-2.904-1.137-8.405-2.748-12.446-0.97c-6.099,2.685-7.273,10.358-13.253,8.242
261 | 	c-7.843-2.775-8.953-5.008-14.546-5.01c-24.653-0.011-4.849,26.507-18.264,26.507c-12.377,0,5.791-33.537-19.422-26.682
262 | 	c-7.703,2.095-9.806-0.942-9.817-4.173c-0.037-10.336,24.357-4.544,38.897-4.72c10.234-0.124,19.856-1.439,37.905-2.102
263 | 	c16.642-0.61,32.699,1.552,46.009,1.927c12.438,0.351,28.973-8.865,31.532,3.315c1.449,6.896,0.318,15.624-3.874,15.624
264 | 	c-7.619,0-1.788-15.192-19.243-7.111c-7.581,3.51-15.963-9.738-26.669,1.066C120.644,426.744,118.381,416.561,110.946,413.652z
265 |                           ;
266 |                           M111.547,413.9c-2.969-0.956-8.775-0.949-13.167-0.5c-14.667,1.5-8.325,16.508-14.667,16.666
267 | 	c-6.667,0.166-0.167-13.5-13.013-14.151c-30.471-1.545-5.572,46.651-18.987,46.651c-12.377,0,10.333-50.166-18.667-44.5
268 | 	c-7.835,1.531-9.537-1.417-9.548-4.647c-0.037-10.336,23.675-5.177,38.215-5.353c10.234-0.124,20.618-1.671,38.667-2.333
269 | 	c16.642-0.61,32.023,1.458,45.333,1.833c12.438,0.351,33.819-8.431,33.199,4.001c-0.532,10.666,0.414,26.166-5.245,25.833
270 | 	c-7.606-0.447-2.954-31.5-19.243-18.899c-7.985,6.177-17.658-5.969-27.377,5.732C118.88,434.066,121.38,417.067,111.547,413.9z
271 |                           ;
272 |                           M111.547,415.233c-6.667-0.834-9.667,4.667-13.833,3.333c-19.649-6.291-8.158,22.176-14.5,22.334
273 | 	c-6.667,0.166,2.833-18-13.333-22.167c-29.544-7.615-9.667,43.833-20.167,43.833c-10.333,0,8.004-55.006-16.833-39
274 | 	c-7.5,4.833-9.508-3.78-9.299-7.004c0.799-12.329,23.592-7.153,38.132-7.329c10.234-0.124,20.238-1.505,38.287-2.167
275 | 	c16.642-0.61,32.903,1.125,46.213,1.5c12.438,0.351,35.058-5.579,31.863,6.451c-5.532,20.833,1.25,28.216-4.409,27.883
276 | 	c-7.606-0.447-6.058-37.895-20.62-23.333c-10.167,10.166-15.972-0.747-25,12C119.547,443.568,121.798,416.515,111.547,415.233z
277 |                           " />
278 |     </path>
279 |     <rect x="10" y="475.571" fill="#fefae9" width="180" height="4" />
280 | </svg>
281 | <div class="text">
282 |   <h1>happy birthday!</h1>
283 |   <p>DOST</p>
284 | </div>
285 | </body>
286 | </html>


--------------------------------------------------------------------------------
/candle/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background-color: black;
  3 |     /* animation: change-background 3s infinite linear; */
  4 |   }
  5 |  
  6 |   
  7 |   .floor {
  8 |     position: absolute;
  9 |     left: 50%;
 10 |     top: 50%;
 11 |     width: 350px;
 12 |     height: 5px;
 13 |     background: rgb(222, 30, 190);
 14 |     transform: translate(-50%, -50%);
 15 |     box-shadow: 0px 2px 5px #111;
 16 |     z-index: 2;
 17 |   }
 18 |   
 19 |   .candles {
 20 |     position: absolute;
 21 |     left: 50%;
 22 |     top: 50%;
 23 |     width: 250px;
 24 |     height: 150px;
 25 |     transform: translate(-50%, -100%);
 26 |     z-index: 1;
 27 |   }
 28 |   
 29 |   .candle1 {
 30 |     position: absolute;
 31 |     left: 50%;
 32 |     top: 50%;
 33 |     width: 35px;
 34 |     height: 100px;
 35 |     background: #fff;
 36 |     border: 3px solid rgb(222, 30, 190);;
 37 |     border-bottom: 0px;
 38 |     border-radius: 3px;
 39 |     transform-origin: center right;
 40 |     transform: translate(60%, -25%);
 41 |     box-shadow: -2px 0px 0px #95c6f2 inset;
 42 |     /* animation: expand-body 3s infinite linear; */
 43 |   }
 44 |   
 45 |   .candle1__stick, .candle2__stick {
 46 |     position: absolute;
 47 |     left: 50%;
 48 |     top: 0%;
 49 |     width: 3px;
 50 |     height: 18px;
 51 |     background:  rgb(222, 30, 190);;;
 52 |     border-radius: 8px;
 53 |     transform: translate(-50%, -100%);
 54 |   }
 55 |   
 56 |   .candle2__stick {
 57 |     height: 12px;
 58 |     transform-origin: bottom center;
 59 |     /* animation: stick-animation 3s infinite linear; */
 60 |   }
 61 |   
 62 |   .candle1__eyes, .candle2__eyes {
 63 |     position: absolute;
 64 |     left: 50%;
 65 |     top: 0%;
 66 |     width: 35px;
 67 |     height: 30px;
 68 |     transform: translate(-50%, 0%);
 69 |   }
 70 |   
 71 |   .candle1__eyes-one {
 72 |     position: absolute;
 73 |     left: 30%;
 74 |     top: 20%;
 75 |     width: 5px;
 76 |     height: 5px;
 77 |     border-radius: 100%;
 78 |     background: rgb(222, 30, 190);;;
 79 |     transform: translate(-70%, 0%);
 80 |     animation: blink-eyes 3s infinite linear;
 81 |   }
 82 |   
 83 |   .candle1__eyes-two {
 84 |     position: absolute;
 85 |     left: 70%;
 86 |     top: 20%;
 87 |     width: 5px;
 88 |     height: 5px;
 89 |     border-radius: 100%;
 90 |     background:  rgb(222, 30, 190);;;
 91 |     transform: translate(-70%, 0%);
 92 |     animation: blink-eyes 3s infinite linear;
 93 |   }
 94 |   
 95 |   .candle1__mouth {
 96 |     position: absolute;
 97 |     left: 40%;
 98 |     top: 20%;
 99 |     width: 0px;
100 |     height: 0px;
101 |     border-radius: 20px;
102 |     background:  rgb(222, 30, 190);;;
103 |     transform: translate(-50%, -50%);
104 |     /* animation: uff 3s infinite linear; */
105 |   }
106 |   
107 |   
108 |   
109 |   .candle2 {
110 |     position: absolute;
111 |     left: 20%;
112 |     top: 65%;
113 |     width: 42px;
114 |     height: 60px;
115 |     background: #fff;
116 |      border: 3px solid rgb(222, 30, 190);;;
117 |     border-bottom: 0px;
118 |     border-radius: 3px;
119 |     transform: translate(60%, -15%);
120 |     transform-origin: center right;
121 |     box-shadow: -2px 0px 0px #95c6f2 inset;
122 |     /* animation: shake-left 3s infinite linear; */
123 |   }
124 |   
125 |   .candle2__eyes-one {
126 |     position: absolute;
127 |     left: 30%;
128 |     top: 50%;
129 |     width: 5px;
130 |     height: 5px;
131 |     display: inline-block;
132 |     border: 0px solid #673C63;
133 |     border-radius: 100%;
134 |     /* float: left; */
135 |     background: rgb(222, 30, 190);
136 |     transform: translate(-80%, 0%);
137 |     /* animation: changeto-lower 3s infinite linear; */
138 |   }
139 |   
140 |   .candle2__eyes-two {
141 |     position: absolute;
142 |     left: 70%;
143 |     top: 50%;
144 |     width: 5px;
145 |     height: 5px;
146 |     display: inline-block;
147 |     border: 0px solid #673C63;
148 |     border-radius: 100%;
149 |     /* float: left; */
150 |     background:  rgb(222, 30, 190);;;
151 |     transform: translate(-80%, 0%);
152 |     /* animation: changeto-greater 3s infinite linear; */
153 |   }
154 |   
155 | 
156 |   
157 |   .candle2__fire {
158 |     position: absolute;
159 |     top: 50%;
160 |     left: 40%;
161 |     display: block;
162 |     width: 16px;
163 |     height: 20px;
164 |     background-color: red;
165 |     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
166 |     background: #FF9800;
167 |     transform: translate(-50%, -50%);
168 |     animation: dance-fire 3s infinite linear;
169 |   }
170 |   .candle1__fire {
171 |     position: absolute;
172 |     top: -27%;
173 |     right: 10%;
174 |     display: block;
175 |     width: 16px;
176 |     height: 20px;
177 |     background-color: red;
178 |     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
179 |     background: #FF9800;
180 |     transform: translate(-30%, -50%);
181 |     animation: dance-fire 3s infinite linear;
182 |   }
183 |   
184 |   
185 |   
186 | 
187 |   @keyframes dance-fire {
188 |     59%,89% {
189 |       left: 40.8%;
190 |       width: 16px;
191 |       height: 20px;
192 |     }
193 |     90%,0%,7%,15%,23%,31%,39%,47%,55% {
194 |       left: 40.8%;
195 |       width: 16px;
196 |       height: 20px;
197 |       background: #FFC107;
198 |     }
199 |     94%,3%,11%,19%,27%,35%,43%,51%,58% {
200 |       left: 41.2%;
201 |       width: 16px;
202 |       height: 20px;
203 |       background: #FF9800;
204 |     }
205 |   }
206 | 
207 | 


--------------------------------------------------------------------------------
/candle/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en" >
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Candle Fun (Pure CSS Animation)</title>
 7 |   <link rel="stylesheet" href="index.css">
 8 | 
 9 | </head>
10 | <body>
11 | <!-- partial:index.partial.html -->
12 | <div class="wrapper">
13 |   <div class="candles">
14 | 
15 |     <div class="candle1">
16 |       <div class="candle1__body">
17 |         <div class="candle1__eyes">
18 |           <span class="candle1__eyes-one"></span>
19 |           <span class="candle1__eyes-two"></span>
20 |         </div>
21 |         <div class="candle1__mouth"></div>
22 |       </div>
23 |       <div class="candle1__stick"></div>
24 |       <div class="candle1__fire"></div>
25 |     </div>
26 |     
27 |     <div class="candle2">
28 |       <div class="candle2__body">
29 |         <div class="candle2__eyes">
30 |           <div class="candle2__eyes-one"></div>
31 |           <div class="candle2__eyes-two"></div>
32 |         </div>
33 |       </div>
34 |       <div class="candle2__stick"></div>
35 |     </div>
36 |     <div class="candle2__fire"></div>
37 | 
38 |     
39 |   </div>
40 | 
41 |   <div class="floor">
42 |   </div>
43 |   
44 | 
45 | </div>
46 | <!-- partial -->
47 |   
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/candle/rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/candle/rain.png


--------------------------------------------------------------------------------
/cat.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <style>
  9 |         body{
 10 |             padding: 0;
 11 |             margin: 0;
 12 |         }
 13 |         .container{
 14 |             height: 500px;
 15 |             width: 350px;
 16 |             /* background-color: aqua; */
 17 |             position: absolute;
 18 |             margin: auto;
 19 |             top:0;
 20 |             bottom: 0;
 21 |             left: 0;
 22 |             right: 0;
 23 |             z-index: -1;
 24 |               background-color: crimson;
 25 |               border: 5px solid black;
 26 |               animation: color 2s linear infinite;
 27 |         }
 28 |         @keyframes color {
 29 |             0%{
 30 |                 border: 5px solid rgba(22, 14, 176, 0.489);
 31 |             }
 32 |             
 33 |         }
 34 |         .cat{
 35 |             position: relative;
 36 |             top:150px;
 37 |             left:50px;
 38 |         }
 39 |         .face{
 40 |             background-color: #33292b;
 41 |             height: 90px;
 42 |             width: 150px;
 43 |             border-radius: 30px;
 44 |         }
 45 |         .ear-l,.ear-r{
 46 |             width: 0;
 47 |             height: 0;
 48 |             border-bottom: 50px solid #33292b;
 49 |             border-left: 40px solid transparent;
 50 |             border-left: 40px solid transparent;
 51 |             position: relative;
 52 |         }
 53 |         .ear-l{
 54 |             bottom:35px;
 55 |             transform: rotate(-30deg);
 56 |             
 57 |             left: 1px;
 58 |         }
 59 |         .ear-r{
 60 |             bottom:85px ;
 61 |             left:110px;
 62 |             transform: rotate(30deg);
 63 |         }
 64 |         .inner1{
 65 |             width: 0;
 66 |             height: 0;
 67 |             border-bottom: 50px solid #d36149;
 68 |             border-left: 35px solid transparent;
 69 |              position: relative;
 70 |              right: 40px;
 71 | 
 72 |         }
 73 |         .inner2{
 74 |             width: 0;
 75 |             height: 0;
 76 |             border-bottom: 50px solid #d36149;
 77 |             border-right: 30px solid transparent;
 78 |              position: relative;
 79 |             right: 15px;
 80 | 
 81 |         }
 82 |         .eye-l,.eye-r{
 83 |             background-color: #d2873b;
 84 |             height: 30px;
 85 |             width: 30px;
 86 |             border-radius: 50%;
 87 |             position: relative;
 88 |         }
 89 |         .eye-l{
 90 |             bottom: 70px;
 91 |             left: 30px;
 92 |         }
 93 |         .eye-r{
 94 |             bottom: 100px;
 95 |             left: 100px;
 96 |         }
 97 |         .eyeball{
 98 |             background-color: #262626;
 99 |             height: 22px;
100 |             width: 24px;
101 |             border-radius: 50%;
102 |             position: relative;
103 |             top:3px;
104 |             left: 3px;
105 |         }
106 |         .nose{
107 |              height: 0;
108 |              width: 0;
109 |              border-top: 8px solid #d36149;
110 |              border-left: 7px solid transparent;
111 |              border-right: 7px solid transparent;
112 |              position: relative;
113 |              bottom: 110px;
114 |              left: 68px;
115 |         }
116 |         .l1,.l2{
117 |             background-color: #d36149;
118 |             height: 8px;
119 |             width: 1px;
120 |             position: relative;
121 |         }
122 |         .l1{
123 |             transform: rotate(45deg);
124 |             right: 4px;
125 |             bottom: 1.5px;
126 |         }
127 |         .l2{
128 |             transform: rotate(-50px);
129 |            bottom: 10px;
130 |            left: 2px;
131 |         }
132 |         .body{
133 |             background-color: #33292b;
134 |             height: 120px;
135 |             width: 130px;
136 |             position: relative;
137 |             left: 70px;
138 |             bottom: -70px;
139 |             border-radius: 0 65px 0 0 ;
140 |           
141 |         }
142 |       
143 |         .leg-l,.leg-r{
144 |              background-color: #33292b;
145 |              height: 30px;
146 |              width: 22px;
147 |              position: relative;
148 |              border-radius: 0 0px 10px 10px;
149 |         }
150 |         .leg-l{
151 |             top:120px;
152 |             animation: leganim 2s linear infinite;
153 | 
154 |         }
155 |         /* @keyframes leganim {
156 |             0%{
157 |                 position: relative;
158 |                 left: 20px;
159 |             }
160 |             10%{
161 |                 position: relative;
162 |                 left: 20px;
163 |             }
164 |             
165 |         } */
166 |         .leg-r{
167 |             top:85px ;
168 |             left: 80px;
169 |             animation: leg2anim 2s alternate infinite;
170 |         }
171 |         /* @keyframes leg2anim {
172 |             0%{
173 |                 position: relative;
174 |                 left: 60px;
175 |             }
176 |           
177 |             
178 |         } */
179 |         .tail{
180 |              background-color: #33292b;
181 |              width: 100px;
182 |              height: 20px;
183 |              position: relative;
184 |              top:40px;
185 |              left: 100px;
186 |              border-radius: 0 20px 20px 0;
187 |              animation: anim 1s linear infinite;
188 |         }
189 | @keyframes anim {
190 |     0%{
191 |         width: 110px;
192 |     }
193 |     10%{
194 |         width: 90px;
195 |     }
196 |     40%{
197 |         width: 120px;
198 |     }
199 |     100%{
200 |         width: 100px;
201 |     }
202 |    
203 |     
204 | }
205 | 
206 | 
207 |         
208 |     </style>
209 | </head>
210 | <body>
211 |     <div class="container">
212 |         <div class="cat">
213 |             <div class="face">
214 |                  <div class="ear-l">
215 |                      <!-- <div class="inner1"></div> -->
216 | 
217 |                  </div>
218 |                  <div class="ear-r">
219 |                     <!-- <div class="inner2"></div> -->
220 |                  </div>
221 |             </div>
222 |             <div class="eye-l">
223 |                 <div class="eyeball"></div>
224 |             </div>
225 |             <div class="eye-r">
226 |                 <div class="eyeball"></div>
227 |             </div>
228 |             <div class="nose">
229 |                 <div class="l1"></div>
230 |                 <div class="l2"></div>
231 |             </div>
232 |         </div>
233 |        <div class="body">
234 |            <div class="leg-l"></div>
235 |            <div class="leg-r"></div>
236 |            <div class="tail"></div>
237 |        </div>
238 |     </div>
239 | </body>
240 | </html>


--------------------------------------------------------------------------------
/edit.js:
--------------------------------------------------------------------------------
 1 | const fileInput = document.querySelector("#imageFileInput");
 2 | const canvas = document.querySelector("#canvas");
 3 | const canvasCtx = canvas.getContext("2d");
 4 | const brightnessInput = document.querySelector("#brightness");
 5 | const saturationInput = document.querySelector("#saturation");
 6 | const blurInput = document.querySelector("#blur");
 7 | const inversionInput = document.querySelector("#inversion");
 8 | 
 9 | const settings = {};
10 | let image = null;
11 | 
12 | function resetSettings() {
13 |   settings.brightness = "100";
14 |   settings.saturation = "100";
15 |   settings.blur = "0";
16 |   settings.inversion = "0";
17 | 
18 |   brightnessInput.value = settings.brightness;
19 |   saturationInput.value = settings.saturation;
20 |   blurInput.value = settings.blur;
21 |   inversionInput.value = settings.inversion;
22 | }
23 | 
24 | function updateSetting(key, value) {
25 |   if (!image) return;
26 | 
27 |   settings[key] = value;
28 |   renderImage();
29 | }
30 | 
31 | function generateFilter() {
32 |   const { brightness, saturation, blur, inversion } = settings;
33 | 
34 |   return `brightness(${brightness}%) saturate(${saturation}%) blur(${blur}px) invert(${inversion}%)`;
35 | }
36 | 
37 | function renderImage() {
38 |   canvas.width = image.width;
39 |   canvas.height = image.height;
40 | 
41 |   canvasCtx.filter = generateFilter();
42 |   canvasCtx.drawImage(image, 0, 0);
43 | }
44 | 
45 | brightnessInput.addEventListener("change", () =>
46 |   updateSetting("brightness", brightnessInput.value)
47 | );
48 | saturationInput.addEventListener("change", () =>
49 |   updateSetting("saturation", saturationInput.value)
50 | );
51 | blurInput.addEventListener("change", () =>
52 |   updateSetting("blur", blurInput.value)
53 | );
54 | inversionInput.addEventListener("change", () =>
55 |   updateSetting("inversion", inversionInput.value)
56 | );
57 | 
58 | fileInput.addEventListener("change", () => {
59 |   image = new Image();
60 | 
61 |   image.addEventListener("load", () => {
62 |     resetSettings();
63 |     renderImage();
64 |   });
65 | 
66 |   image.src = URL.createObjectURL(fileInput.files[0]);
67 | });
68 | 
69 | resetSettings();
70 | 


--------------------------------------------------------------------------------
/egg.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 |         *,
10 |         *:before,
11 |         *:after{
12 |             padding: 0;
13 |             margin: 0;
14 |             box-sizing: border-box;
15 |         }
16 |         body{
17 |             background-color: skyblue;
18 | 
19 |         }
20 |         div{
21 |             height: 300px;
22 |             width: 230px;
23 |             background-color: #ffffff;
24 |             position: absolute;
25 |             margin: auto;
26 |             right: 0;
27 |             left: 0;
28 |             top:0;
29 |             bottom: 0;
30 |             border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
31 |             box-shadow: 25px 0 rgba(0,0,0,0.1);
32 |         }
33 |         div:before{
34 |             content: "";
35 |             position: absolute;
36 |             height: 14px;
37 |             width: 14px;
38 |             background-color: black;
39 |             /* border-radius: 50%; */
40 |             border-radius: 60%;
41 |             top:180px;
42 |             right: 88px;
43 |            box-shadow:  -40px 0 0 #010000,
44 |             10px 15px 0 -2px #f5750f,
45 |             -50px 15px 0 -2px #f5750f,
46 |      
47 |             -20px 0 0 50px #f5d201;
48 |                 
49 |         }
50 |     div::after{
51 |         content: "";
52 |         position:absolute;
53 |         height: 15px;
54 |         width: 25px;
55 |         top: 200px;
56 |         left: 102px;
57 |         border-radius:50%;
58 |         border: 3px solid black;
59 |         background:radial-gradient(
60 |             at 50% 100%,
61 |             #f5750f 8px,
62 |             #010008 8px
63 |         );
64 |     }
65 |     </style>
66 | </head>
67 | <body>
68 |     <div></div>
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/frog.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Frog</title>
  8 |     <style>
  9 |     *{
 10 |         margin: 0;
 11 |         padding: 0;
 12 |     }
 13 |     body{
 14 |         background-color: black;
 15 |         min-height: 100vh;
 16 |         display: grid;
 17 |         place-items: center;
 18 |     }
 19 |     .frog_body{
 20 |         width: 150px;
 21 |         height: 170px;
 22 |         background-color: rgb(98, 215, 98);
 23 |         border-top-left-radius: 80px;
 24 |         border-top-right-radius: 80px;
 25 |         padding-top: 3rem;
 26 |         overflow: hidden;
 27 |         position: relative;
 28 |         z-index: 2;
 29 | 
 30 |     }
 31 |     .frog_circle{
 32 |         background-color: #d7fff3;
 33 |         width: 150px;
 34 |         height: 150px;
 35 |         border-radius: 50%;
 36 |         border-top: 4x solid rgb(98, 215, 98);;
 37 |         position: relative;
 38 |     }
 39 |     .frog_bottom{
 40 |         position: absolute;
 41 |         left: 0;
 42 |         bottom: 0;
 43 |         width: 150px;
 44 |         height: 100px;
 45 |         background-color:#d7fff3;
 46 | 
 47 |     }
 48 |     .frog-left-leg{
 49 |         position:absolute;
 50 |         left:200px;
 51 |          top:250px;
 52 |         background-color:rgb(98, 215, 98);;
 53 |         width: 100px;
 54 |         height: 120px;
 55 |         border-top-right-radius: 200px;
 56 |         border-bottom-left-radius:200px ;
 57 |         transform: rotate(-2deg);
 58 |     }
 59 |     .frog-right-leg{
 60 |         position:absolute;
 61 |         left:330px;
 62 |          top:250px;
 63 |         background-color:rgb(98, 215, 98);;
 64 |         width: 100px;
 65 |         height: 120px;
 66 |         border-top-left-radius: 200px;
 67 |         border-bottom-right-radius:200px ;
 68 |         transform: rotate(-2deg);
 69 |     }
 70 |     .frog_eyes{
 71 |         position: absolute;
 72 |     
 73 |         top:160px;
 74 |         width: 60px;
 75 |         height: 60px;
 76 |         border-radius: 50%;
 77 |         z-index: 4;
 78 |         background-color:rgb(98, 215, 98);;
 79 | }
 80 | .frog_eyes::after{
 81 |      content: " ";
 82 |      position: absolute;
 83 |      left: 50%;
 84 |      top:50%;
 85 |      background-color: #d7fff3;
 86 |      width: 40px;
 87 |      height: 40px;
 88 |      border-radius: inherit;
 89 |      transform: translate(-50%,-50%);
 90 | 
 91 | }
 92 | .frog_eyes::before{
 93 |     content: " ";
 94 |     position: absolute;
 95 |     left:50%;
 96 |     top:50%;
 97 |     transform: translate(-50%,-50%);
 98 |     width: 25px;
 99 |     height: 25px;
100 |     z-index:6 ;
101 |     background-color: #0c2a60;
102 |     border-radius: inherit;
103 | 
104 | 
105 | }
106 |     .frog_eyes-right{
107 |         position: absolute;
108 |       left:320px;
109 |         top:160px;
110 |         width: 60px;
111 |         height: 60px;
112 |         border-radius: 50%;
113 |         z-index: 4;
114 |         background-color:rgb(98, 215, 98);;
115 |     }
116 |     .frog_eyes_circle{
117 |         position: absolute;
118 |         left: 20px;
119 |         top:20px;
120 |         width: 8px;
121 |         height: 8px;
122 |         border-radius: 50%;
123 |         background-color: #d7fff3;
124 |     }
125 |     .frog_finger{
126 |        background-color: rgb(98, 215, 98);;
127 |        position: absolute;
128 |        left: 195px;
129 |        top:385px;
130 |       bottom: 0;
131 |       width: 100px;
132 |       height: 10px;
133 |     }
134 |     .frog-finger-right{
135 |         background-color: rgb(98, 215, 98);;
136 |        position: absolute;
137 |        left: 320px;
138 |        top:385px;
139 |       bottom: 0;
140 |       width: 100px;
141 |       height: 10px;
142 | 
143 |     }
144 |     .frog-finger-right::after{
145 |         content: " ";
146 |         position: absolute;
147 |         left:80px;
148 |         top:-10px;
149 |         width: 35px;
150 |         height: 20px;
151 |         border-radius: 50%;
152 |         background-color: rgb(98, 215, 98);;
153 |     }
154 |     .frog_finger::after{
155 |         content: " ";
156 |         position: absolute;
157 |         left:0;
158 |         top:-100%;
159 |         width: 35px;
160 |         height: 20px;
161 |         border-radius: 50%;
162 |         background-color: rgb(98, 215, 98);;
163 |     }
164 | 
165 |     </style>
166 | </head>
167 | <body>
168 |      <div class="frog">
169 |         <div class="frog_eyes">
170 |             <div class="frog_eyes_circle"></div>
171 |         </div>
172 | 
173 |         <div class="frog_eyes frog_eyes-right">
174 |             <div class="frog_eyes_circle frog_eyes_circle_right"></div>
175 |         </div>
176 | 
177 |         <div class="frog_body">
178 |             <div class="frog_circle"></div>
179 |             <div class="frog_bottom"></div>
180 |         </div>
181 | 
182 |          <div class="frog_finger"></div>
183 |         <div class="frog-left-leg"></div>
184 |         <div class="frog-right-leg"></div>
185 |         <div class="frog-finger-left"></div>
186 |         <div class="frog-finger-right"></div>
187 |     </div> 
188 | </body>
189 | </html>


--------------------------------------------------------------------------------
/handingImages/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background: rgb(54, 53, 52);
 3 |     overflow: hidden;
 4 |   }
 5 |   
 6 |   img {
 7 |     max-width: 100%;
 8 |   }
 9 |   
10 |   .hangings {
11 |     display: flex;
12 |     align-items: flex-start;
13 |     justify-content: center;
14 |     margin-top: 5rem;
15 |   }
16 |   
17 |   .hangings__image {
18 |     padding: 0.5rem 0.5rem 1.5rem;
19 |     background: white;
20 |     position: relative;
21 |     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
22 |     transform-origin: center -5rem;
23 |   }
24 |   
25 |   .hangings__image::before {
26 |     content: '';
27 |     display: block;
28 |     height: 10rem;
29 |     width: 2px;
30 |     background: saddlebrown;
31 |     position: absolute;
32 |     bottom: 100%;
33 |     left: 50%;
34 |   }
35 |   
36 |   .hangings__image:nth-child(1) {
37 |     animation: image1 5s infinite ease-in-out;
38 |     transform: rotate(-10deg);
39 |   }
40 |   
41 |   .hangings__image:nth-child(2) {
42 |     animation: image2 4.5s infinite ease-in-out;
43 |     transform: rotate(8deg);
44 |   }
45 |   
46 |   .hangings__image:nth-child(3) {
47 |     animation: image3 4s infinite ease-in-out;
48 |     transform: rotate(-4deg);
49 |   }
50 |   
51 |   @keyframes image1 {
52 |     50% {
53 |       transform: rotate(10deg);
54 |     }
55 |   }
56 |   
57 |   @keyframes image2 {
58 |     50% {
59 |       transform: rotate(-5deg);
60 |     }
61 |   }
62 |   
63 |   @keyframes image3 {
64 |     50% {
65 |       transform: rotate(6deg);
66 |     }
67 |   }
68 |   


--------------------------------------------------------------------------------
/handingImages/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>CSS Hangings Images</title>
 7 |     <link rel="stylesheet" href="index.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="hangings">
11 |       <div class="hangings__image">
12 |         <img
13 |           src="https://images.unsplash.com/photo-1608848461950-0fe51dfc41cb?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D"
14 |           alt=""
15 |         />
16 |       </div>
17 |       <div class="hangings__image">
18 |         <img src="https://i.pinimg.com/564x/26/34/c2/2634c2ca323faef854a08b822e703947.jpg" alt="" />
19 |       </div>
20 | 
21 |       <div class="hangings__image">
22 |         <img src="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bGl0dGxlJTIwY2F0fGVufDB8fDB8fHww" alt="" />
23 |       </div>
24 | 
25 |     
26 |     </div>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/icecream.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <style>
 9 | * {
10 |   padding: 0;
11 |   margin: 0;
12 |   box-sizing: border-box;
13 | }
14 | body {
15 |   background-color:rgb(108, 176, 224);
16 | }
17 | .container {
18 |   height: 600px;
19 |   width: 700px;
20 |   position: absolute;
21 |   transform: translate(-50%, -50%);
22 |   top: 50%;
23 |   left: 50%;
24 |   display: flex;
25 |   justify-content: space-around;
26 | }
27 | .icecream {
28 |   width: 180px;
29 |   height: 300px;
30 |   position: relative;
31 |   top: 45px;
32 |   border-radius: 90px 90px 20px 20px;
33 | }
34 | .icecream:before {
35 |   position: absolute;
36 |   content: "";
37 |   height: 180px;
38 |   width: 15px;
39 |   background-color: rgba(255, 255, 255, 0.2);
40 |   border-radius: 15px;
41 |   right: 20px;
42 |   top: 60px;
43 | }
44 | .icecream:after {
45 |   position: absolute;
46 |   content: "";
47 |   height: 180px;
48 |   width: 30px;
49 |   background-color: #dba55b;
50 |   top: 300px;
51 |   margin: auto;
52 |   left: 0;
53 |   right: 0;
54 |   border-radius: 0 0 20px 20px;
55 | }
56 | .icecream-1 {
57 |   background-image: repeating-linear-gradient(
58 |     135deg,
59 |     #521a01 0,
60 |     #ff7eaf 20px,
61 |     #ff0565 20px,
62 |     #ff0565 40px
63 |   );
64 | }
65 | .icecream-2 {
66 |   background-size: 60px 300px;
67 |   background-image: radial-gradient(
68 |     circle at 30px 53px,
69 |     #521a01 80px,
70 |     #d0020f 81px
71 |   );
72 | }
73 | .icecream-3 {
74 |   background-color: #d0020f;
75 |   background-image: radial-gradient(#c39a6b 4px, transparent 4px);
76 |   background-size: 30px 30px;
77 | }
78 | 
79 |     </style>
80 | 
81 | </head>
82 | <body>
83 |     <div class="container">
84 |         <div class="icecream icecream-1"></div>
85 |         <div class="icecream icecream-2"></div>
86 |         <div class="icecream icecream-3"></div>
87 |       </div>
88 | </body>
89 | </html>


--------------------------------------------------------------------------------
/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/image1.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!-- <html>
 2 |   <head>
 3 |     <script src="https://cdn.jsdelivr.net/npm/p5@1.4.2/lib/p5.js"></script>
 4 |     <script src="sanak.js"></script>
 5 |     <script src="snake.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <main>
 9 |     </main>
10 |   </body>
11 | </html> -->
12 | 
13 | <!DOCTYPE html>
14 | <html lang="en">
15 | <head>
16 |     <meta charset="UTF-8">
17 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
18 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
19 |     <title>Canvas</title>
20 |     <link rel="stylesheet" href="style.css">
21 |     <script src="edit.js"></script>
22 | </head>
23 | <body>
24 |   <div class="editor">
25 |       <div class="toolbar">
26 |         <div class="toolbar-item">
27 |           <input type="file" id="imageFileInput">
28 |         </div>
29 |         <div class="toolbar-item">
30 |           <label class="tool-label" for="brightness">Brightness</label>
31 |           <input class="tool-input" type="range" id="brightness" min="0" max="200">
32 |         </div>
33 |         <div class="toolbar-item">
34 |           <label class="tool-label" for="saturation">Saturation</label>
35 |           <input class="tool-input" type="range" id="saturation" min="0" max="200">
36 |         </div>
37 |         <div class="toolbar-item">
38 |           <label class="tool-label" for="blur">Blur</label>
39 |           <input class="tool-input" type="range" id="blur" min="0" max="25">
40 |         </div>
41 |         <div class="toolbar-item">
42 |           <label class="tool-label" for="inversion">Inversion</label>
43 |           <input class="tool-input" type="range" id="inversion" min="0" max="100">
44 |         </div>
45 |       </div>
46 |       <div class="image-area">
47 |         <canvas id="canvas" height="500" width="500"></canvas>
48 |       </div>
49 |     </div>
50 | 
51 |     <!-- <canvas id="canvas1">
52 |         
53 |     </canvas>  -->
54 |     <!-- <canvas id="canvas1">
55 |         
56 |     </canvas> -->
57 |   <!-- <script src="script1.js"></script> -->
58 | </body>
59 | </html> 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "name": "canvas",
   3 |   "lockfileVersion": 2,
   4 |   "requires": true,
   5 |   "packages": {
   6 |     "": {
   7 |       "dependencies": {
   8 |         "canvas": "^2.9.1"
   9 |       }
  10 |     },
  11 |     "node_modules/@mapbox/node-pre-gyp": {
  12 |       "version": "1.0.9",
  13 |       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.9.tgz",
  14 |       "integrity": "sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw==",
  15 |       "dependencies": {
  16 |         "detect-libc": "^2.0.0",
  17 |         "https-proxy-agent": "^5.0.0",
  18 |         "make-dir": "^3.1.0",
  19 |         "node-fetch": "^2.6.7",
  20 |         "nopt": "^5.0.0",
  21 |         "npmlog": "^5.0.1",
  22 |         "rimraf": "^3.0.2",
  23 |         "semver": "^7.3.5",
  24 |         "tar": "^6.1.11"
  25 |       },
  26 |       "bin": {
  27 |         "node-pre-gyp": "bin/node-pre-gyp"
  28 |       }
  29 |     },
  30 |     "node_modules/abbrev": {
  31 |       "version": "1.1.1",
  32 |       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
  33 |       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
  34 |     },
  35 |     "node_modules/agent-base": {
  36 |       "version": "6.0.2",
  37 |       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
  38 |       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
  39 |       "dependencies": {
  40 |         "debug": "4"
  41 |       },
  42 |       "engines": {
  43 |         "node": ">= 6.0.0"
  44 |       }
  45 |     },
  46 |     "node_modules/ansi-regex": {
  47 |       "version": "5.0.1",
  48 |       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
  49 |       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
  50 |       "engines": {
  51 |         "node": ">=8"
  52 |       }
  53 |     },
  54 |     "node_modules/aproba": {
  55 |       "version": "2.0.0",
  56 |       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
  57 |       "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
  58 |     },
  59 |     "node_modules/are-we-there-yet": {
  60 |       "version": "2.0.0",
  61 |       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
  62 |       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
  63 |       "dependencies": {
  64 |         "delegates": "^1.0.0",
  65 |         "readable-stream": "^3.6.0"
  66 |       },
  67 |       "engines": {
  68 |         "node": ">=10"
  69 |       }
  70 |     },
  71 |     "node_modules/balanced-match": {
  72 |       "version": "1.0.2",
  73 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
  74 |       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
  75 |     },
  76 |     "node_modules/brace-expansion": {
  77 |       "version": "1.1.11",
  78 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
  79 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
  80 |       "dependencies": {
  81 |         "balanced-match": "^1.0.0",
  82 |         "concat-map": "0.0.1"
  83 |       }
  84 |     },
  85 |     "node_modules/canvas": {
  86 |       "version": "2.9.1",
  87 |       "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.9.1.tgz",
  88 |       "integrity": "sha512-vSQti1uG/2gjv3x6QLOZw7TctfufaerTWbVe+NSduHxxLGB+qf3kFgQ6n66DSnuoINtVUjrLLIK2R+lxrBG07A==",
  89 |       "hasInstallScript": true,
  90 |       "dependencies": {
  91 |         "@mapbox/node-pre-gyp": "^1.0.0",
  92 |         "nan": "^2.15.0",
  93 |         "simple-get": "^3.0.3"
  94 |       },
  95 |       "engines": {
  96 |         "node": ">=6"
  97 |       }
  98 |     },
  99 |     "node_modules/chownr": {
 100 |       "version": "2.0.0",
 101 |       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
 102 |       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
 103 |       "engines": {
 104 |         "node": ">=10"
 105 |       }
 106 |     },
 107 |     "node_modules/color-support": {
 108 |       "version": "1.1.3",
 109 |       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
 110 |       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
 111 |       "bin": {
 112 |         "color-support": "bin.js"
 113 |       }
 114 |     },
 115 |     "node_modules/concat-map": {
 116 |       "version": "0.0.1",
 117 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 118 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
 119 |     },
 120 |     "node_modules/console-control-strings": {
 121 |       "version": "1.1.0",
 122 |       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
 123 |       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
 124 |     },
 125 |     "node_modules/debug": {
 126 |       "version": "4.3.4",
 127 |       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 128 |       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
 129 |       "dependencies": {
 130 |         "ms": "2.1.2"
 131 |       },
 132 |       "engines": {
 133 |         "node": ">=6.0"
 134 |       },
 135 |       "peerDependenciesMeta": {
 136 |         "supports-color": {
 137 |           "optional": true
 138 |         }
 139 |       }
 140 |     },
 141 |     "node_modules/decompress-response": {
 142 |       "version": "4.2.1",
 143 |       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
 144 |       "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
 145 |       "dependencies": {
 146 |         "mimic-response": "^2.0.0"
 147 |       },
 148 |       "engines": {
 149 |         "node": ">=8"
 150 |       }
 151 |     },
 152 |     "node_modules/delegates": {
 153 |       "version": "1.0.0",
 154 |       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
 155 |       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
 156 |     },
 157 |     "node_modules/detect-libc": {
 158 |       "version": "2.0.1",
 159 |       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
 160 |       "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==",
 161 |       "engines": {
 162 |         "node": ">=8"
 163 |       }
 164 |     },
 165 |     "node_modules/emoji-regex": {
 166 |       "version": "8.0.0",
 167 |       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
 168 |       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 169 |     },
 170 |     "node_modules/fs-minipass": {
 171 |       "version": "2.1.0",
 172 |       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
 173 |       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
 174 |       "dependencies": {
 175 |         "minipass": "^3.0.0"
 176 |       },
 177 |       "engines": {
 178 |         "node": ">= 8"
 179 |       }
 180 |     },
 181 |     "node_modules/fs.realpath": {
 182 |       "version": "1.0.0",
 183 |       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
 184 |       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
 185 |     },
 186 |     "node_modules/gauge": {
 187 |       "version": "3.0.2",
 188 |       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
 189 |       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
 190 |       "dependencies": {
 191 |         "aproba": "^1.0.3 || ^2.0.0",
 192 |         "color-support": "^1.1.2",
 193 |         "console-control-strings": "^1.0.0",
 194 |         "has-unicode": "^2.0.1",
 195 |         "object-assign": "^4.1.1",
 196 |         "signal-exit": "^3.0.0",
 197 |         "string-width": "^4.2.3",
 198 |         "strip-ansi": "^6.0.1",
 199 |         "wide-align": "^1.1.2"
 200 |       },
 201 |       "engines": {
 202 |         "node": ">=10"
 203 |       }
 204 |     },
 205 |     "node_modules/glob": {
 206 |       "version": "7.2.3",
 207 |       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
 208 |       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 209 |       "dependencies": {
 210 |         "fs.realpath": "^1.0.0",
 211 |         "inflight": "^1.0.4",
 212 |         "inherits": "2",
 213 |         "minimatch": "^3.1.1",
 214 |         "once": "^1.3.0",
 215 |         "path-is-absolute": "^1.0.0"
 216 |       },
 217 |       "engines": {
 218 |         "node": "*"
 219 |       },
 220 |       "funding": {
 221 |         "url": "https://github.com/sponsors/isaacs"
 222 |       }
 223 |     },
 224 |     "node_modules/has-unicode": {
 225 |       "version": "2.0.1",
 226 |       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
 227 |       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
 228 |     },
 229 |     "node_modules/https-proxy-agent": {
 230 |       "version": "5.0.1",
 231 |       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
 232 |       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
 233 |       "dependencies": {
 234 |         "agent-base": "6",
 235 |         "debug": "4"
 236 |       },
 237 |       "engines": {
 238 |         "node": ">= 6"
 239 |       }
 240 |     },
 241 |     "node_modules/inflight": {
 242 |       "version": "1.0.6",
 243 |       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 244 |       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
 245 |       "dependencies": {
 246 |         "once": "^1.3.0",
 247 |         "wrappy": "1"
 248 |       }
 249 |     },
 250 |     "node_modules/inherits": {
 251 |       "version": "2.0.4",
 252 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
 253 |       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
 254 |     },
 255 |     "node_modules/is-fullwidth-code-point": {
 256 |       "version": "3.0.0",
 257 |       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 258 |       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 259 |       "engines": {
 260 |         "node": ">=8"
 261 |       }
 262 |     },
 263 |     "node_modules/lru-cache": {
 264 |       "version": "6.0.0",
 265 |       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
 266 |       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 267 |       "dependencies": {
 268 |         "yallist": "^4.0.0"
 269 |       },
 270 |       "engines": {
 271 |         "node": ">=10"
 272 |       }
 273 |     },
 274 |     "node_modules/make-dir": {
 275 |       "version": "3.1.0",
 276 |       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
 277 |       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
 278 |       "dependencies": {
 279 |         "semver": "^6.0.0"
 280 |       },
 281 |       "engines": {
 282 |         "node": ">=8"
 283 |       },
 284 |       "funding": {
 285 |         "url": "https://github.com/sponsors/sindresorhus"
 286 |       }
 287 |     },
 288 |     "node_modules/make-dir/node_modules/semver": {
 289 |       "version": "6.3.0",
 290 |       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
 291 |       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
 292 |       "bin": {
 293 |         "semver": "bin/semver.js"
 294 |       }
 295 |     },
 296 |     "node_modules/mimic-response": {
 297 |       "version": "2.1.0",
 298 |       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
 299 |       "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
 300 |       "engines": {
 301 |         "node": ">=8"
 302 |       },
 303 |       "funding": {
 304 |         "url": "https://github.com/sponsors/sindresorhus"
 305 |       }
 306 |     },
 307 |     "node_modules/minimatch": {
 308 |       "version": "3.1.2",
 309 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
 310 |       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
 311 |       "dependencies": {
 312 |         "brace-expansion": "^1.1.7"
 313 |       },
 314 |       "engines": {
 315 |         "node": "*"
 316 |       }
 317 |     },
 318 |     "node_modules/minipass": {
 319 |       "version": "3.1.6",
 320 |       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
 321 |       "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
 322 |       "dependencies": {
 323 |         "yallist": "^4.0.0"
 324 |       },
 325 |       "engines": {
 326 |         "node": ">=8"
 327 |       }
 328 |     },
 329 |     "node_modules/minizlib": {
 330 |       "version": "2.1.2",
 331 |       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
 332 |       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
 333 |       "dependencies": {
 334 |         "minipass": "^3.0.0",
 335 |         "yallist": "^4.0.0"
 336 |       },
 337 |       "engines": {
 338 |         "node": ">= 8"
 339 |       }
 340 |     },
 341 |     "node_modules/mkdirp": {
 342 |       "version": "1.0.4",
 343 |       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
 344 |       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
 345 |       "bin": {
 346 |         "mkdirp": "bin/cmd.js"
 347 |       },
 348 |       "engines": {
 349 |         "node": ">=10"
 350 |       }
 351 |     },
 352 |     "node_modules/ms": {
 353 |       "version": "2.1.2",
 354 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
 355 |       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 356 |     },
 357 |     "node_modules/nan": {
 358 |       "version": "2.15.0",
 359 |       "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
 360 |       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
 361 |     },
 362 |     "node_modules/node-fetch": {
 363 |       "version": "2.6.7",
 364 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
 365 |       "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
 366 |       "dependencies": {
 367 |         "whatwg-url": "^5.0.0"
 368 |       },
 369 |       "engines": {
 370 |         "node": "4.x || >=6.0.0"
 371 |       },
 372 |       "peerDependencies": {
 373 |         "encoding": "^0.1.0"
 374 |       },
 375 |       "peerDependenciesMeta": {
 376 |         "encoding": {
 377 |           "optional": true
 378 |         }
 379 |       }
 380 |     },
 381 |     "node_modules/nopt": {
 382 |       "version": "5.0.0",
 383 |       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
 384 |       "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
 385 |       "dependencies": {
 386 |         "abbrev": "1"
 387 |       },
 388 |       "bin": {
 389 |         "nopt": "bin/nopt.js"
 390 |       },
 391 |       "engines": {
 392 |         "node": ">=6"
 393 |       }
 394 |     },
 395 |     "node_modules/npmlog": {
 396 |       "version": "5.0.1",
 397 |       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
 398 |       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
 399 |       "dependencies": {
 400 |         "are-we-there-yet": "^2.0.0",
 401 |         "console-control-strings": "^1.1.0",
 402 |         "gauge": "^3.0.0",
 403 |         "set-blocking": "^2.0.0"
 404 |       }
 405 |     },
 406 |     "node_modules/object-assign": {
 407 |       "version": "4.1.1",
 408 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 409 |       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
 410 |       "engines": {
 411 |         "node": ">=0.10.0"
 412 |       }
 413 |     },
 414 |     "node_modules/once": {
 415 |       "version": "1.4.0",
 416 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 417 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
 418 |       "dependencies": {
 419 |         "wrappy": "1"
 420 |       }
 421 |     },
 422 |     "node_modules/path-is-absolute": {
 423 |       "version": "1.0.1",
 424 |       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 425 |       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
 426 |       "engines": {
 427 |         "node": ">=0.10.0"
 428 |       }
 429 |     },
 430 |     "node_modules/readable-stream": {
 431 |       "version": "3.6.0",
 432 |       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
 433 |       "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
 434 |       "dependencies": {
 435 |         "inherits": "^2.0.3",
 436 |         "string_decoder": "^1.1.1",
 437 |         "util-deprecate": "^1.0.1"
 438 |       },
 439 |       "engines": {
 440 |         "node": ">= 6"
 441 |       }
 442 |     },
 443 |     "node_modules/rimraf": {
 444 |       "version": "3.0.2",
 445 |       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
 446 |       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
 447 |       "dependencies": {
 448 |         "glob": "^7.1.3"
 449 |       },
 450 |       "bin": {
 451 |         "rimraf": "bin.js"
 452 |       },
 453 |       "funding": {
 454 |         "url": "https://github.com/sponsors/isaacs"
 455 |       }
 456 |     },
 457 |     "node_modules/safe-buffer": {
 458 |       "version": "5.2.1",
 459 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
 460 |       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
 461 |       "funding": [
 462 |         {
 463 |           "type": "github",
 464 |           "url": "https://github.com/sponsors/feross"
 465 |         },
 466 |         {
 467 |           "type": "patreon",
 468 |           "url": "https://www.patreon.com/feross"
 469 |         },
 470 |         {
 471 |           "type": "consulting",
 472 |           "url": "https://feross.org/support"
 473 |         }
 474 |       ]
 475 |     },
 476 |     "node_modules/semver": {
 477 |       "version": "7.3.7",
 478 |       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
 479 |       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
 480 |       "dependencies": {
 481 |         "lru-cache": "^6.0.0"
 482 |       },
 483 |       "bin": {
 484 |         "semver": "bin/semver.js"
 485 |       },
 486 |       "engines": {
 487 |         "node": ">=10"
 488 |       }
 489 |     },
 490 |     "node_modules/set-blocking": {
 491 |       "version": "2.0.0",
 492 |       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
 493 |       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
 494 |     },
 495 |     "node_modules/signal-exit": {
 496 |       "version": "3.0.7",
 497 |       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
 498 |       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
 499 |     },
 500 |     "node_modules/simple-concat": {
 501 |       "version": "1.0.1",
 502 |       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
 503 |       "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
 504 |       "funding": [
 505 |         {
 506 |           "type": "github",
 507 |           "url": "https://github.com/sponsors/feross"
 508 |         },
 509 |         {
 510 |           "type": "patreon",
 511 |           "url": "https://www.patreon.com/feross"
 512 |         },
 513 |         {
 514 |           "type": "consulting",
 515 |           "url": "https://feross.org/support"
 516 |         }
 517 |       ]
 518 |     },
 519 |     "node_modules/simple-get": {
 520 |       "version": "3.1.1",
 521 |       "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
 522 |       "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
 523 |       "dependencies": {
 524 |         "decompress-response": "^4.2.0",
 525 |         "once": "^1.3.1",
 526 |         "simple-concat": "^1.0.0"
 527 |       }
 528 |     },
 529 |     "node_modules/string_decoder": {
 530 |       "version": "1.3.0",
 531 |       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
 532 |       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
 533 |       "dependencies": {
 534 |         "safe-buffer": "~5.2.0"
 535 |       }
 536 |     },
 537 |     "node_modules/string-width": {
 538 |       "version": "4.2.3",
 539 |       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
 540 |       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 541 |       "dependencies": {
 542 |         "emoji-regex": "^8.0.0",
 543 |         "is-fullwidth-code-point": "^3.0.0",
 544 |         "strip-ansi": "^6.0.1"
 545 |       },
 546 |       "engines": {
 547 |         "node": ">=8"
 548 |       }
 549 |     },
 550 |     "node_modules/strip-ansi": {
 551 |       "version": "6.0.1",
 552 |       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
 553 |       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
 554 |       "dependencies": {
 555 |         "ansi-regex": "^5.0.1"
 556 |       },
 557 |       "engines": {
 558 |         "node": ">=8"
 559 |       }
 560 |     },
 561 |     "node_modules/tar": {
 562 |       "version": "6.1.11",
 563 |       "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
 564 |       "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
 565 |       "dependencies": {
 566 |         "chownr": "^2.0.0",
 567 |         "fs-minipass": "^2.0.0",
 568 |         "minipass": "^3.0.0",
 569 |         "minizlib": "^2.1.1",
 570 |         "mkdirp": "^1.0.3",
 571 |         "yallist": "^4.0.0"
 572 |       },
 573 |       "engines": {
 574 |         "node": ">= 10"
 575 |       }
 576 |     },
 577 |     "node_modules/tr46": {
 578 |       "version": "0.0.3",
 579 |       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
 580 |       "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
 581 |     },
 582 |     "node_modules/util-deprecate": {
 583 |       "version": "1.0.2",
 584 |       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 585 |       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
 586 |     },
 587 |     "node_modules/webidl-conversions": {
 588 |       "version": "3.0.1",
 589 |       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
 590 |       "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
 591 |     },
 592 |     "node_modules/whatwg-url": {
 593 |       "version": "5.0.0",
 594 |       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
 595 |       "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
 596 |       "dependencies": {
 597 |         "tr46": "~0.0.3",
 598 |         "webidl-conversions": "^3.0.0"
 599 |       }
 600 |     },
 601 |     "node_modules/wide-align": {
 602 |       "version": "1.1.5",
 603 |       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
 604 |       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
 605 |       "dependencies": {
 606 |         "string-width": "^1.0.2 || 2 || 3 || 4"
 607 |       }
 608 |     },
 609 |     "node_modules/wrappy": {
 610 |       "version": "1.0.2",
 611 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
 612 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
 613 |     },
 614 |     "node_modules/yallist": {
 615 |       "version": "4.0.0",
 616 |       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
 617 |       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
 618 |     }
 619 |   },
 620 |   "dependencies": {
 621 |     "@mapbox/node-pre-gyp": {
 622 |       "version": "1.0.9",
 623 |       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.9.tgz",
 624 |       "integrity": "sha512-aDF3S3rK9Q2gey/WAttUlISduDItz5BU3306M9Eyv6/oS40aMprnopshtlKTykxRNIBEZuRMaZAnbrQ4QtKGyw==",
 625 |       "requires": {
 626 |         "detect-libc": "^2.0.0",
 627 |         "https-proxy-agent": "^5.0.0",
 628 |         "make-dir": "^3.1.0",
 629 |         "node-fetch": "^2.6.7",
 630 |         "nopt": "^5.0.0",
 631 |         "npmlog": "^5.0.1",
 632 |         "rimraf": "^3.0.2",
 633 |         "semver": "^7.3.5",
 634 |         "tar": "^6.1.11"
 635 |       }
 636 |     },
 637 |     "abbrev": {
 638 |       "version": "1.1.1",
 639 |       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
 640 |       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
 641 |     },
 642 |     "agent-base": {
 643 |       "version": "6.0.2",
 644 |       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
 645 |       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
 646 |       "requires": {
 647 |         "debug": "4"
 648 |       }
 649 |     },
 650 |     "ansi-regex": {
 651 |       "version": "5.0.1",
 652 |       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
 653 |       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
 654 |     },
 655 |     "aproba": {
 656 |       "version": "2.0.0",
 657 |       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
 658 |       "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
 659 |     },
 660 |     "are-we-there-yet": {
 661 |       "version": "2.0.0",
 662 |       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
 663 |       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
 664 |       "requires": {
 665 |         "delegates": "^1.0.0",
 666 |         "readable-stream": "^3.6.0"
 667 |       }
 668 |     },
 669 |     "balanced-match": {
 670 |       "version": "1.0.2",
 671 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 672 |       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 673 |     },
 674 |     "brace-expansion": {
 675 |       "version": "1.1.11",
 676 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 677 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 678 |       "requires": {
 679 |         "balanced-match": "^1.0.0",
 680 |         "concat-map": "0.0.1"
 681 |       }
 682 |     },
 683 |     "canvas": {
 684 |       "version": "2.9.1",
 685 |       "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.9.1.tgz",
 686 |       "integrity": "sha512-vSQti1uG/2gjv3x6QLOZw7TctfufaerTWbVe+NSduHxxLGB+qf3kFgQ6n66DSnuoINtVUjrLLIK2R+lxrBG07A==",
 687 |       "requires": {
 688 |         "@mapbox/node-pre-gyp": "^1.0.0",
 689 |         "nan": "^2.15.0",
 690 |         "simple-get": "^3.0.3"
 691 |       }
 692 |     },
 693 |     "chownr": {
 694 |       "version": "2.0.0",
 695 |       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
 696 |       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
 697 |     },
 698 |     "color-support": {
 699 |       "version": "1.1.3",
 700 |       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
 701 |       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
 702 |     },
 703 |     "concat-map": {
 704 |       "version": "0.0.1",
 705 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 706 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
 707 |     },
 708 |     "console-control-strings": {
 709 |       "version": "1.1.0",
 710 |       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
 711 |       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
 712 |     },
 713 |     "debug": {
 714 |       "version": "4.3.4",
 715 |       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 716 |       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
 717 |       "requires": {
 718 |         "ms": "2.1.2"
 719 |       }
 720 |     },
 721 |     "decompress-response": {
 722 |       "version": "4.2.1",
 723 |       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
 724 |       "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
 725 |       "requires": {
 726 |         "mimic-response": "^2.0.0"
 727 |       }
 728 |     },
 729 |     "delegates": {
 730 |       "version": "1.0.0",
 731 |       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
 732 |       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
 733 |     },
 734 |     "detect-libc": {
 735 |       "version": "2.0.1",
 736 |       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
 737 |       "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w=="
 738 |     },
 739 |     "emoji-regex": {
 740 |       "version": "8.0.0",
 741 |       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
 742 |       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 743 |     },
 744 |     "fs-minipass": {
 745 |       "version": "2.1.0",
 746 |       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
 747 |       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
 748 |       "requires": {
 749 |         "minipass": "^3.0.0"
 750 |       }
 751 |     },
 752 |     "fs.realpath": {
 753 |       "version": "1.0.0",
 754 |       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
 755 |       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
 756 |     },
 757 |     "gauge": {
 758 |       "version": "3.0.2",
 759 |       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
 760 |       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
 761 |       "requires": {
 762 |         "aproba": "^1.0.3 || ^2.0.0",
 763 |         "color-support": "^1.1.2",
 764 |         "console-control-strings": "^1.0.0",
 765 |         "has-unicode": "^2.0.1",
 766 |         "object-assign": "^4.1.1",
 767 |         "signal-exit": "^3.0.0",
 768 |         "string-width": "^4.2.3",
 769 |         "strip-ansi": "^6.0.1",
 770 |         "wide-align": "^1.1.2"
 771 |       }
 772 |     },
 773 |     "glob": {
 774 |       "version": "7.2.3",
 775 |       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
 776 |       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 777 |       "requires": {
 778 |         "fs.realpath": "^1.0.0",
 779 |         "inflight": "^1.0.4",
 780 |         "inherits": "2",
 781 |         "minimatch": "^3.1.1",
 782 |         "once": "^1.3.0",
 783 |         "path-is-absolute": "^1.0.0"
 784 |       }
 785 |     },
 786 |     "has-unicode": {
 787 |       "version": "2.0.1",
 788 |       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
 789 |       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
 790 |     },
 791 |     "https-proxy-agent": {
 792 |       "version": "5.0.1",
 793 |       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
 794 |       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
 795 |       "requires": {
 796 |         "agent-base": "6",
 797 |         "debug": "4"
 798 |       }
 799 |     },
 800 |     "inflight": {
 801 |       "version": "1.0.6",
 802 |       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 803 |       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
 804 |       "requires": {
 805 |         "once": "^1.3.0",
 806 |         "wrappy": "1"
 807 |       }
 808 |     },
 809 |     "inherits": {
 810 |       "version": "2.0.4",
 811 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
 812 |       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
 813 |     },
 814 |     "is-fullwidth-code-point": {
 815 |       "version": "3.0.0",
 816 |       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 817 |       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
 818 |     },
 819 |     "lru-cache": {
 820 |       "version": "6.0.0",
 821 |       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
 822 |       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 823 |       "requires": {
 824 |         "yallist": "^4.0.0"
 825 |       }
 826 |     },
 827 |     "make-dir": {
 828 |       "version": "3.1.0",
 829 |       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
 830 |       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
 831 |       "requires": {
 832 |         "semver": "^6.0.0"
 833 |       },
 834 |       "dependencies": {
 835 |         "semver": {
 836 |           "version": "6.3.0",
 837 |           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
 838 |           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
 839 |         }
 840 |       }
 841 |     },
 842 |     "mimic-response": {
 843 |       "version": "2.1.0",
 844 |       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
 845 |       "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA=="
 846 |     },
 847 |     "minimatch": {
 848 |       "version": "3.1.2",
 849 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
 850 |       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
 851 |       "requires": {
 852 |         "brace-expansion": "^1.1.7"
 853 |       }
 854 |     },
 855 |     "minipass": {
 856 |       "version": "3.1.6",
 857 |       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
 858 |       "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
 859 |       "requires": {
 860 |         "yallist": "^4.0.0"
 861 |       }
 862 |     },
 863 |     "minizlib": {
 864 |       "version": "2.1.2",
 865 |       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
 866 |       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
 867 |       "requires": {
 868 |         "minipass": "^3.0.0",
 869 |         "yallist": "^4.0.0"
 870 |       }
 871 |     },
 872 |     "mkdirp": {
 873 |       "version": "1.0.4",
 874 |       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
 875 |       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
 876 |     },
 877 |     "ms": {
 878 |       "version": "2.1.2",
 879 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
 880 |       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 881 |     },
 882 |     "nan": {
 883 |       "version": "2.15.0",
 884 |       "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
 885 |       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
 886 |     },
 887 |     "node-fetch": {
 888 |       "version": "2.6.7",
 889 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
 890 |       "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
 891 |       "requires": {
 892 |         "whatwg-url": "^5.0.0"
 893 |       }
 894 |     },
 895 |     "nopt": {
 896 |       "version": "5.0.0",
 897 |       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
 898 |       "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
 899 |       "requires": {
 900 |         "abbrev": "1"
 901 |       }
 902 |     },
 903 |     "npmlog": {
 904 |       "version": "5.0.1",
 905 |       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
 906 |       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
 907 |       "requires": {
 908 |         "are-we-there-yet": "^2.0.0",
 909 |         "console-control-strings": "^1.1.0",
 910 |         "gauge": "^3.0.0",
 911 |         "set-blocking": "^2.0.0"
 912 |       }
 913 |     },
 914 |     "object-assign": {
 915 |       "version": "4.1.1",
 916 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 917 |       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
 918 |     },
 919 |     "once": {
 920 |       "version": "1.4.0",
 921 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 922 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
 923 |       "requires": {
 924 |         "wrappy": "1"
 925 |       }
 926 |     },
 927 |     "path-is-absolute": {
 928 |       "version": "1.0.1",
 929 |       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 930 |       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
 931 |     },
 932 |     "readable-stream": {
 933 |       "version": "3.6.0",
 934 |       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
 935 |       "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
 936 |       "requires": {
 937 |         "inherits": "^2.0.3",
 938 |         "string_decoder": "^1.1.1",
 939 |         "util-deprecate": "^1.0.1"
 940 |       }
 941 |     },
 942 |     "rimraf": {
 943 |       "version": "3.0.2",
 944 |       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
 945 |       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
 946 |       "requires": {
 947 |         "glob": "^7.1.3"
 948 |       }
 949 |     },
 950 |     "safe-buffer": {
 951 |       "version": "5.2.1",
 952 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
 953 |       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
 954 |     },
 955 |     "semver": {
 956 |       "version": "7.3.7",
 957 |       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
 958 |       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
 959 |       "requires": {
 960 |         "lru-cache": "^6.0.0"
 961 |       }
 962 |     },
 963 |     "set-blocking": {
 964 |       "version": "2.0.0",
 965 |       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
 966 |       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
 967 |     },
 968 |     "signal-exit": {
 969 |       "version": "3.0.7",
 970 |       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
 971 |       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
 972 |     },
 973 |     "simple-concat": {
 974 |       "version": "1.0.1",
 975 |       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
 976 |       "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
 977 |     },
 978 |     "simple-get": {
 979 |       "version": "3.1.1",
 980 |       "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
 981 |       "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
 982 |       "requires": {
 983 |         "decompress-response": "^4.2.0",
 984 |         "once": "^1.3.1",
 985 |         "simple-concat": "^1.0.0"
 986 |       }
 987 |     },
 988 |     "string_decoder": {
 989 |       "version": "1.3.0",
 990 |       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
 991 |       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
 992 |       "requires": {
 993 |         "safe-buffer": "~5.2.0"
 994 |       }
 995 |     },
 996 |     "string-width": {
 997 |       "version": "4.2.3",
 998 |       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
 999 |       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
1000 |       "requires": {
1001 |         "emoji-regex": "^8.0.0",
1002 |         "is-fullwidth-code-point": "^3.0.0",
1003 |         "strip-ansi": "^6.0.1"
1004 |       }
1005 |     },
1006 |     "strip-ansi": {
1007 |       "version": "6.0.1",
1008 |       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
1009 |       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
1010 |       "requires": {
1011 |         "ansi-regex": "^5.0.1"
1012 |       }
1013 |     },
1014 |     "tar": {
1015 |       "version": "6.1.11",
1016 |       "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
1017 |       "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
1018 |       "requires": {
1019 |         "chownr": "^2.0.0",
1020 |         "fs-minipass": "^2.0.0",
1021 |         "minipass": "^3.0.0",
1022 |         "minizlib": "^2.1.1",
1023 |         "mkdirp": "^1.0.3",
1024 |         "yallist": "^4.0.0"
1025 |       }
1026 |     },
1027 |     "tr46": {
1028 |       "version": "0.0.3",
1029 |       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
1030 |       "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
1031 |     },
1032 |     "util-deprecate": {
1033 |       "version": "1.0.2",
1034 |       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
1035 |       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
1036 |     },
1037 |     "webidl-conversions": {
1038 |       "version": "3.0.1",
1039 |       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
1040 |       "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
1041 |     },
1042 |     "whatwg-url": {
1043 |       "version": "5.0.0",
1044 |       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
1045 |       "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
1046 |       "requires": {
1047 |         "tr46": "~0.0.3",
1048 |         "webidl-conversions": "^3.0.0"
1049 |       }
1050 |     },
1051 |     "wide-align": {
1052 |       "version": "1.1.5",
1053 |       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
1054 |       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
1055 |       "requires": {
1056 |         "string-width": "^1.0.2 || 2 || 3 || 4"
1057 |       }
1058 |     },
1059 |     "wrappy": {
1060 |       "version": "1.0.2",
1061 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
1062 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
1063 |     },
1064 |     "yallist": {
1065 |       "version": "4.0.0",
1066 |       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
1067 |       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
1068 |     }
1069 |   }
1070 | }
1071 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "dependencies": {
3 |     "canvas": "^2.9.1"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/sanak.js:
--------------------------------------------------------------------------------
 1 | var s;
 2 | var scl=20
 3 | function setup(){
 4 |     createCanvas(640,360)
 5 |     s=new Snake()
 6 | }
 7 | 
 8 | function draw(){
 9 |     background(51)
10 |     s.update()
11 |     s.show()
12 | }
13 | 
14 | function keyPressed(){
15 |     if(key===UP_ARROW){
16 |     s.dir(0,-1)
17 |     }
18 |     else if(keyCode===DOWN_ARROW){
19 |            s.dir(0,1)
20 |     }
21 |     else if(keyCode===LEFT_ARROW){
22 |         s.dir(-1,0)
23 |  }
24 |  else if(keyCode===RIGHT_ARROW){
25 |     s.dir(1,0)
26 | }
27 | }
28 | 
29 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | const image = new Image();
  2 | image.src = 'data:image/jpeg;base64,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';
  3 | 
  4 | image.addEventListener('load', function(){
  5 |     const canvas = document.getElementById('canvas1');
  6 |     const ctx = canvas.getContext('2d');
  7 |     canvas.width = 572;
  8 |     canvas.height = 352;
  9 | 
 10 |     let particlesArray = [];
 11 |     const numberOfParticles = 12000;
 12 |     const detail = 1;
 13 | 
 14 |     ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 15 |     const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
 16 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
 17 | 
 18 |     let grid = [];
 19 |     for (let y = 0; y < canvas.height; y += detail){
 20 |         let row = [];
 21 |         for (let x = 0; x < canvas.width; x += detail){
 22 |             const red = pixels.data[(y * 4 * pixels.width) + (x * 4)]
 23 |             const green = pixels.data[(y * 4 * pixels.width) + (x * 4 + 1)]
 24 |             const blue = pixels.data[(y * 4 * pixels.width) + (x * 4 + 2)]
 25 |             const color = 'rgb(' + red +',' + green + ',' + blue + ')';
 26 |             const brightness = calculateBrightness(red, green, blue)/100;
 27 | 
 28 |             row.push(brightness);
 29 |         }  
 30 |         grid.push(row); 
 31 |     }
 32 | 
 33 |     class Particle {
 34 |         constructor(){
 35 |             this.x = Math.random() * canvas.width;
 36 |             this.y =  0;
 37 |             //this.prevX = this.x;
 38 |             this.speed = 0;
 39 |             this.velocity = Math.random() * 0.7;
 40 |             this.size = Math.random() * 2 + .1;
 41 |         }
 42 |         update () {
 43 |             this.speed = grid[Math.floor(this.y / detail)][Math.floor(this.x / detail)];
 44 |             let movement = (2.5 - this.speed) + this.velocity;
 45 |             this.y += movement;
 46 |             if (this.y >= canvas.height) {
 47 |                 this.y = 0;
 48 |                 this.x = Math.random() * canvas.width;
 49 |             }
 50 |             //console.log(this.x += movement)
 51 |         }
 52 |         draw(){
 53 |             ctx.beginPath();
 54 |             ctx.fillStyle = 'white';
 55 |             ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
 56 |             ctx.fill();
 57 |         }
 58 |     }
 59 | 
 60 |     function init(){
 61 |         for (let i = 0; i < numberOfParticles; i++){
 62 |             particlesArray.push(new Particle());
 63 |         }
 64 |     }
 65 |     init();
 66 | 
 67 |     function animate () {
 68 |         ctx.globalAlpha = 0.05;
 69 |         ctx.fillStyle = 'rgb(0, 0,0)';
 70 |         ctx.fillRect(0, 0, canvas.width, canvas.height);
 71 |         ctx.globalAlpha = 0.2;
 72 |         for (let i = 0; i < particlesArray.length; i++) {
 73 |             particlesArray[i].update();
 74 |             ctx.globalAlpha = particlesArray[i].speed * 0.3;
 75 |             particlesArray[i].draw();
 76 |         }
 77 |         requestAnimationFrame( animate );
 78 |     }
 79 |     animate();
 80 | 
 81 |     function calculateBrightness(red, green, blue){
 82 |         return Math.sqrt(
 83 |             (red * red) * 0.299 +
 84 |             (green * green) * 0.587 +
 85 |             (blue * blue) * 0.114
 86 |         );
 87 |     }
 88 | 
 89 | });
 90 | // const myImage=new Image();
 91 | 
 92 | // myImage.src="data:image/png;base64,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";
 93 | // // const canvas=document.getElementById("canvas1");
 94 | // // const ctx=canvas.getContext('2d');
 95 | // // canvas.width=500;
 96 | // // canvas.height=706;
 97 | // // ctx.drawImage(myImage,0,0,canvaswidth,canvasheight);
 98 | // myImage.addEventListener('load',function(){
 99 | // const canvas=document.getElementById("canvas1");
100 | // const  ctx=canvas.getContext('2d');
101 | // canvas.width=500;
102 | // canvas.height=706;
103 | // ctx.drawImage(myImage,0,0,canvas.width,canvas.height);
104 | // let particlesArray=[];
105 | // let numberOfParticles=5000;
106 | //  class Particle{
107 | //      constructor(){
108 | //      this.x=Math.random() * canvas.width;
109 | //      this.y=1;
110 | //      this.speed=0;
111 | //      this.velocity=Math.random() * 3.5;
112 | //      this.size=Math.random() * 1.5+ 1;
113 | //      }
114 | //      update(){
115 | //          this.y += this.velocity;
116 | //          if(this.y>=canvas.height){
117 | //               this.y=0;
118 | //               this.x=Math.random() * canvas.width;
119 | //          }
120 | //      }
121 | //      draw(){
122 | //          ctx.beginPath();
123 | //          ctx.fillStyle='white';
124 | //          ctx.arc=(this.x,this.y,this.size,0,Math.PI * 2)
125 | //          ctx.fill()
126 | //         }
127 | //  }
128 | //  function init(){
129 | //      for(let i=0;i<numberOfParticles;i++){
130 | //          particlesArray.push(new Particle)
131 | 
132 | //      }
133 | //  }
134 | //  init();
135 | //  function animate(){
136 | //      ctx.drawImage(myImage,0,0,canvas.width,canvas.height);
137 | //      ctx.globalAlpha=0.05;
138 | //      ctx.fillStyle='rgba(0,0,0)';
139 | //      ctx.fillRect(0,0,canvas.width,canvas.height);
140 | //     for(let i=0;i<particlesArray.length;i++){
141 | //         particlesArray[i].update();
142 | //         particlesArray[i].draw();
143 | //     }
144 | //     requestAnimationFrame(animate);
145 | //  }
146 | //  animate();
147 | // });


--------------------------------------------------------------------------------
/script1.js:
--------------------------------------------------------------------------------
 1 | // first happynesss
 2 | 
 3 | 
 4 | 
 5 | const canvas=document.getElementById('canvas1');
 6 | const ctx=canvas.getContext('2d');
 7 | canvas.width=window.innerWidth;
 8 | canvas.height=window.innerHeight;
 9 | let particalArr=[];
10 | const mouse={
11 |     x:null,
12 |     y:null,
13 |     radius:150
14 | 
15 | }
16 | window.addEventListener('mousemove',function(event){
17 |     mouse.x=event.x;
18 |     mouse.y=event.y;
19 |     mouse.radius=150;
20 |     // console.log(mouse.x,mouse.y)
21 | });
22 | ctx.fillStyle='white';
23 | ctx.font='40px Verdana';
24 | ctx.fillText('A',0,30);
25 | ctx.strokeStyle='white';
26 | ctx.strokeRect(0,0,100,100)
27 | const data=ctx.getImageData(0,0,100,100)
28 | class Partical{
29 |     constructor(x,y){
30 |          this.x=x;
31 |          this.y=y;
32 |          this.size=3;
33 |          this.baseX=this.x;
34 |          this.baseY=this.y;
35 |          this.density=(Math.random()*30)+1;
36 | 
37 | 
38 |     }
39 |     draw(){
40 |         ctx.fillStyle='purple';
41 |         ctx.beginPath();
42 |         ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
43 |         ctx.closePath()
44 |         ctx.fill()
45 | 
46 |     }
47 |     update(){
48 |         let dx=mouse.x-this.x;
49 |         let dy =mouse.y-this.y;
50 |        
51 |         let distance=Math.sqrt(dx*dx+dy*dy);
52 |         let forceDirectionX=dx/distance;
53 |         let forceDirectionY=dy/distance;
54 |         let maxDistance=mouse.radius;
55 |         let force=(maxDistance-distance)/maxDistance;
56 |         if(distance<300){
57 |             this.x+= forceDirectionX*3;
58 |             this.y+= forceDirectionY*3;
59 | 
60 |         }
61 |         else{
62 |             this.size=3;
63 |         }
64 | 
65 |     }
66 | }
67 | 
68 | function init(){
69 |     particalArr=[];
70 | 
71 | for(let i =0;i<1000;i++){
72 |     let x=Math.random()*canvas.width;
73 |     let y=Math.random()*canvas.height;
74 |     particalArr.push(new Partical(x,y))
75 | }
76 |     // particalArr.push(new Partical(200,200))
77 |     // particalArr.push(new Partical(50,50))
78 | }
79 | init();
80 | console.log(particalArr)
81 | 
82 | function animate(){
83 |     ctx.clearRect(0,0,canvas.width,canvas.height);
84 |     for(let i=0;i<particalArr.length;i++){
85 |         particalArr[i].draw();
86 |         particalArr[i].update()
87 |     }
88 |     requestAnimationFrame(animate)
89 | }
90 | animate();


--------------------------------------------------------------------------------
/script2.js:
--------------------------------------------------------------------------------
  1 | const canvas=document.getElementById('canvas1');
  2 | const ctx=canvas.getContext('2d');
  3 | canvas.width=window.innerWidth;
  4 | canvas.height=window.innerHeight;
  5 | let particalArr=[];
  6 | let adjustX=5;
  7 | let adjustY=10;
  8 | 
  9 | const mouse={
 10 |     x:null,
 11 |     y:null,
 12 |     radius:150
 13 | 
 14 | }
 15 | window.addEventListener('mousemove',function(event){
 16 |     mouse.x=event.x;
 17 |     mouse.y=event.y;
 18 |    
 19 |     // console.log(mouse.x,mouse.y)
 20 | });
 21 | ctx.fillStyle='white';
 22 | ctx.font='40px Verdana';
 23 | ctx.fillText('CHHAVI',0,30);
 24 | ctx.strokeStyle='white';
 25 | ctx.strokeRect(0,0,100,100)
 26 | const textCoordinates=ctx.getImageData(0,0,100,100)
 27 | class Partical{
 28 |     constructor(x,y){
 29 |          this.x=x;
 30 |          this.y=y;
 31 |          this.size=3;
 32 |          this.baseX=this.x;
 33 |          this.baseY=this.y;
 34 |          this.density=(Math.random()*40)+5;
 35 | 
 36 | 
 37 |     }
 38 |     draw(){
 39 |         ctx.fillStyle='red';
 40 |         ctx.beginPath();
 41 |         ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
 42 |         ctx.closePath()
 43 |         ctx.fill()
 44 | 
 45 |     }
 46 |     update(){
 47 |         let dx=mouse.x-this.x;
 48 |         let dy =mouse.y-this.y;
 49 |        
 50 |         let distance=Math.sqrt(dx*dx+dy*dy);
 51 |         let forceDirectionX=dx/distance;
 52 |         let forceDirectionY=dy/distance;
 53 |         let maxDistance=mouse.radius;
 54 |         let force=(maxDistance-distance)/maxDistance;
 55 |         let directionX=forceDirectionX*force*this.density;
 56 |         let directionY=forceDirectionY*force*this.density;
 57 |         if(distance<mouse.radius){
 58 |             this.x-= directionX;
 59 |             this.y-= directionY;
 60 | 
 61 |         }
 62 |         else{
 63 |             if(this.x!==this.baseX){
 64 |                 let dx=this.x-this.baseX;
 65 |                 this.x-=dx/10;
 66 |             }
 67 |             if(this.y!==this.baseY){
 68 |                 let dy=this.y-this.baseY;
 69 |                 this.y-=dy/10;
 70 |             }
 71 |         }
 72 | 
 73 |     }
 74 | }
 75 | // console.log(textCoordinates.data)
 76 | function init(){
 77 |     particalArr=[];
 78 |     for(let y=0, y2=textCoordinates.height; y < y2; y++){
 79 |         for(let x=0,x2=textCoordinates.height;x<x2;x++){
 80 |             if(textCoordinates.data[(y*4*textCoordinates.width)+(x*4)+3]>128){
 81 |                 let positionX=x+adjustX;
 82 |                 let positionY=y+adjustY;
 83 |                 particalArr.push(new Partical(positionX*20,
 84 |                     positionY*20))
 85 |             }
 86 |         }
 87 |       
 88 |     }
 89 | 
 90 | // for(let i =0;i<1000;i++){
 91 | //     let x=Math.random()*canvas.width;
 92 | //     let y=Math.random()*canvas.height;
 93 | //     particalArr.push(new Partical(x,y))
 94 | // }
 95 |     // particalArr.push(new Partical(200,200))
 96 |     // particalArr.push(new Partical(50,50))
 97 | }
 98 | init();
 99 | console.log(particalArr)
100 | 
101 | function animate(){
102 |     ctx.clearRect(0,0,canvas.width,canvas.height);
103 |     for(let i=0;i<particalArr.length;i++){
104 |         particalArr[i].draw();
105 |         particalArr[i].update()
106 |     }
107 |     // connect()
108 |     requestAnimationFrame(animate)
109 | }
110 | animate();
111 | function connect(){
112 |     for(let a=0;a<particalArr.length;a++){
113 |         for(let b=a;b<particalArr.length;b++){
114 |            let dx=particalArr[a].x-particalArr[b].x;
115 |            let dy=particalArr[a].y-particalArr[b].y;
116 |            let distance=Math.sqrt(dx*dx+dy*dy)
117 |            if(distance<100){
118 |                ctx.strokeStyle='white';
119 |                ctx.lineWidth=2;
120 |                ctx.beginPath();
121 |                ctx.moveTo(particalArr[a].x,particalArr[a].y)
122 |                ctx.lineTo(particalArr[b].x,particalArr[b].y)
123 |                ctx.stroke();
124 |            }
125 | 
126 |         }
127 |     }
128 | }


--------------------------------------------------------------------------------
/script3.js:
--------------------------------------------------------------------------------
  1 | const canvas=document.getElementById('canvas1');
  2 | const ctx=canvas.getContext('2d');
  3 | canvas.width=window.innerWidth;
  4 | canvas.height=window.innerHeight;
  5 | let particalArr=[];
  6 | let adjustX=5;
  7 | let adjustY=10;
  8 | 
  9 | const mouse={
 10 |     x:null,
 11 |     y:null,
 12 |     radius:150
 13 | 
 14 | }
 15 | window.addEventListener('mousemove',function(event){
 16 |     mouse.x=event.x;
 17 |     mouse.y=event.y;
 18 |    
 19 |     // console.log(mouse.x,mouse.y)
 20 | });
 21 | ctx.fillStyle='white';
 22 | ctx.font='40px Verdana';
 23 | ctx.fillText('CHHAVI',0,30);
 24 | ctx.strokeStyle='white';
 25 | ctx.strokeRect(0,0,100,100)
 26 | const textCoordinates=ctx.getImageData(0,0,100,100)
 27 | class Partical{
 28 |     constructor(x,y){
 29 |          this.x=x;
 30 |          this.y=y;
 31 |          this.size=3;
 32 |          this.baseX=this.x;
 33 |          this.baseY=this.y;
 34 |          this.density=(Math.random()*40)+5;
 35 | 
 36 | 
 37 |     }
 38 |     draw(){
 39 |         ctx.fillStyle='red';
 40 |         ctx.beginPath();
 41 |         ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
 42 |         ctx.closePath()
 43 |         ctx.fill()
 44 | 
 45 |     }
 46 |     update(){
 47 |         let dx=mouse.x-this.x;
 48 |         let dy =mouse.y-this.y;
 49 |        
 50 |         let distance=Math.sqrt(dx*dx+dy*dy);
 51 |         let forceDirectionX=dx/distance;
 52 |         let forceDirectionY=dy/distance;
 53 |         let maxDistance=mouse.radius;
 54 |         let force=(maxDistance-distance)/maxDistance;
 55 |         let directionX=forceDirectionX*force*this.density;
 56 |         let directionY=forceDirectionY*force*this.density;
 57 |         if(distance<mouse.radius){
 58 |             this.x-= directionX;
 59 |             this.y-= directionY;
 60 | 
 61 |         }
 62 |         else{
 63 |             if(this.x!==this.baseX){
 64 |                 let dx=this.x-this.baseX;
 65 |                 this.x-=dx/10;
 66 |             }
 67 |             if(this.y!==this.baseY){
 68 |                 let dy=this.y-this.baseY;
 69 |                 this.y-=dy/10;
 70 |             }
 71 |         }
 72 | 
 73 |     }
 74 | }
 75 | // console.log(textCoordinates.data)
 76 | function init(){
 77 |     particalArr=[];
 78 |     for(let y=0, y2=textCoordinates.height; y < y2; y++){
 79 |         for(let x=0,x2=textCoordinates.height;x<x2;x++){
 80 |             if(textCoordinates.data[(y*4*textCoordinates.width)+(x*4)+3]>128){
 81 |                 let positionX=x+adjustX;
 82 |                 let positionY=y+adjustY;
 83 |                 particalArr.push(new Partical(positionX*20,
 84 |                     positionY*20))
 85 |             }
 86 |         }
 87 |       
 88 |     }
 89 | 
 90 | // for(let i =0;i<1000;i++){
 91 | //     let x=Math.random()*canvas.width;
 92 | //     let y=Math.random()*canvas.height;
 93 | //     particalArr.push(new Partical(x,y))
 94 | // }
 95 |     // particalArr.push(new Partical(200,200))
 96 |     // particalArr.push(new Partical(50,50))
 97 | }
 98 | init();
 99 | console.log(particalArr)
100 | 
101 | function animate(){
102 |     ctx.clearRect(0,0,canvas.width,canvas.height);
103 |     for(let i=0;i<particalArr.length;i++){
104 |         particalArr[i].draw();
105 |         particalArr[i].update()
106 |     }
107 |      connect()
108 |     requestAnimationFrame(animate)
109 | }
110 | animate();
111 | function connect(){
112 |     for(let a=0;a<particalArr.length;a++){
113 |         for(let b=a;b<particalArr.length;b++){
114 |            let dx=particalArr[a].x-particalArr[b].x;
115 |            let dy=particalArr[a].y-particalArr[b].y;
116 |            let distance=Math.sqrt(dx*dx+dy*dy)
117 |            if(distance<100){
118 |                ctx.strokeStyle='white';
119 |                ctx.lineWidth=2;
120 |                ctx.beginPath();
121 |                ctx.moveTo(particalArr[a].x,particalArr[a].y)
122 |                ctx.lineTo(particalArr[b].x,particalArr[b].y)
123 |                ctx.stroke();
124 |            }
125 | 
126 |         }
127 |     }
128 | }


--------------------------------------------------------------------------------
/sketch.js:
--------------------------------------------------------------------------------
 1 | var angle = 0;
 2 | function setup() {
 3 |   createCanvas(600,600);
 4 |   slider = createSlider(0, TWO_PI, PI/4, 0.01);
 5 | }
 6 | function draw() {
 7 |   background(10);
 8 | 
 9 |   angle = slider.value();
10 |   stroke(255);
11 |   translate(200, height);
12 |   branch(120);
13 | }
14 | 
15 | function branch(len) {
16 |   line(0, 0, 0, -len);
17 |   translate(0, -len);
18 |  
19 |   if (len > 4) {
20 |     push();
21 |     rotate(angle);
22 |     branch(len * 0.67);
23 |     pop();
24 |     push();
25 |     rotate(-angle);
26 |     branch(len * 0.67);
27 |     pop();
28 |   }
29 | 
30 |   // line(0,0,0,-len*0.67)
31 | }
32 | 


--------------------------------------------------------------------------------
/sketch1.js:
--------------------------------------------------------------------------------
1 | function setup(){
2 |     createCanvas(640,360)
3 | }
4 | function draw(){
5 |     rect(100,200,75,150)
6 | }


--------------------------------------------------------------------------------
/snake.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function Snake(){
 3 |     this.x=0;
 4 |     this.y=0;
 5 |     this.xspeed=1;
 6 |     this.yspeed=0;
 7 | 
 8 |     this.dir=function(x,y){
 9 |         this.xspeed=x;
10 |         this.yspeed=y;
11 |     }
12 |     
13 |     this.update=function(){
14 |         this.x=this.x+  this.xspeed  +scl;
15 |         this.y=this.y+  this.yspeed   +scl;
16 |     }
17 | 
18 |   this.show=function(){
19 |     fill(255)
20 |     rect(this.x,this.y,scl,scl)
21 |   }
22 | }


--------------------------------------------------------------------------------
/snow.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <style>
  4 |         body {
  5 |   background-color: #8AC6D0;
  6 | }
  7 | 
  8 | .ground {
  9 |   position: absolute;
 10 |   width: 800px;
 11 |   height: 400px;
 12 |   left: 0px;
 13 |   top: 390px;
 14 |   background-color: rgb(234, 228, 228)
 15 | }
 16 | 
 17 | .body {
 18 |   position: absolute;
 19 |   left: 300px;
 20 |   top: 300px;
 21 | }
 22 | 
 23 | .first {
 24 |   position: absolute;
 25 |   width: 100px;
 26 |   height: 100px;
 27 |   border-radius: 50%;
 28 |   background-color: white;
 29 |   animation: baseanim 2s linear infinite;
 30 | }
 31 | 
 32 | 
 33 | .second {
 34 |   position: absolute;
 35 |   top: -50px;
 36 |   left: 10px;
 37 |   width: 80px;
 38 |   height: 80px;
 39 |   border-radius: 50%;
 40 |   background-color: white;
 41 | }
 42 | 
 43 | .eyes {
 44 |   position: absolute;
 45 |   top: -30px;
 46 |   left: 30px;
 47 | }
 48 | 
 49 | .left-eye {
 50 |   position: absolute;
 51 |   top: 0px;
 52 |   left: 0px;
 53 |   width: 8px;
 54 |   height: 8px;
 55 |   border-radius: 50%;
 56 |   background-color: black;
 57 | }
 58 | 
 59 | .right-eye {
 60 |   position: absolute;
 61 |   top: 0px;
 62 |   left: 20px;
 63 |   width: 8px;
 64 |   height: 8px;
 65 |   border-radius: 50%;
 66 |   background-color: black;
 67 | }
 68 | 
 69 | .nose {
 70 |   height: 0;
 71 |   width: 0;
 72 |   border-top: 30px solid #eb7e0b;
 73 |   border-right: 6px solid transparent;
 74 |   border-left:6px solid transparent;
 75 |   position: relative;
 76 |   top: 8px;
 77 |   left: -5px;
 78 |   transform: rotate(60deg)
 79 | }
 80 | 
 81 | .hat {
 82 |   position: absolute;
 83 |   top: -110px;
 84 |   transform: rotate(10deg);
 85 |   left: 40px;
 86 | }
 87 | 
 88 | .top {
 89 |   background-color: black;
 90 |   width: 50px;
 91 |   height: 60px;
 92 | }
 93 | 
 94 | /* .rim {
 95 |   left: -15px;
 96 |   position: absolute;
 97 |   background-color: black;
 98 |   width: 80px;
 99 |   height: 10px;
100 | } */
101 | 
102 | .buttons {
103 |   position: absolute;
104 |   top: 20px;
105 |   left: 30px;
106 | }
107 | 
108 | .button-top {
109 |   left: 0px;
110 |   position: absolute;
111 |   background-color: black;
112 |   width: 10px;
113 |   height: 10px;
114 |   border-radius: 50%;
115 | }
116 | 
117 | .button-middle {
118 |   left: 0px;
119 |   position: absolute;
120 |   background-color: black;
121 |   width: 10px;
122 |   height: 10px;
123 |   top: 20px;
124 |   border-radius: 50%;
125 | }
126 | 
127 | .button-bottom {
128 |   left: 0px;
129 |   position: absolute;
130 |   background-color: black;
131 |   width: 10px;
132 |   height: 10px;
133 |   top: 40px;
134 |   border-radius: 50%;
135 | }
136 | 
137 | .arm-left {
138 |   left: -40px;
139 |   position: absolute;
140 |   background-color: brown;
141 |   width: 50px;
142 |   height: 6px;
143 |   top: 10px;
144 |   transform: rotate(30deg)
145 | } 
146 | 
147 | .arm-right {
148 |   left: 80px;
149 |   position: absolute;
150 |   background-color: brown;
151 |   width: 50px;
152 |   height: 6px;
153 |   top: 10px;
154 |   transform: rotate(-30deg)
155 | }
156 |     </style>
157 |     <body>
158 |         <div class="body"> 
159 |           
160 |             <div class="first"></div>
161 |             <div class="second"></div>
162 |             <div class="eyes">
163 |               <div class="left-eye"></div>
164 |               <div class="right-eye"></div>
165 |               <div class="nose"></div>
166 |             </div>
167 |           <!--   <div class="hat">
168 |               <div class="top"></div>
169 |               <div class="rim"></div>
170 |             </div> -->
171 |             <div class="buttons">
172 |               <div class="button-top"></div>
173 |               <div class="button-middle"></div>
174 |               <div class="button-bottom"></div>
175 |             </div>
176 |             
177 |             <div class="arm-left"></div>
178 |             <div class="arm-right"></div>
179 |           </div>
180 |           
181 |           <div class="ground"></div>
182 |     </body>
183 | </html>
184 | 


--------------------------------------------------------------------------------
/solar/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background-color: black;
  3 |     display: flex;
  4 |     overflow: hidden;
  5 |     perspective: 800px;
  6 | }
  7 | 
  8 | .planet-wrapper {
  9 |     width: 400px;
 10 |     height: 400px;
 11 |     margin: auto;
 12 |     display: flex;
 13 |     flex-shrink: 0;
 14 |     position: relative;
 15 |     transform-style: preserve-3d;
 16 |     transform: rotateX(65deg) rotateY(15deg);
 17 |     transition: transform 300ms cubic-bezier(0.25, 0.55, 0.3, 1.75);
 18 | }
 19 | 
 20 | .ring {
 21 |     margin: auto;
 22 |     display: flex;
 23 |     flex-shrink: 0;
 24 |     position: relative;
 25 |     box-sizing: border-box;
 26 |     border-radius: 50%;
 27 | }
 28 | 
 29 | .ring.ring-1 {
 30 |     width: 400px;
 31 |     height: 400px;
 32 |     border: solid 20px #efefef;
 33 | }
 34 | 
 35 | .ring.ring-2 {
 36 |     width: 356px;
 37 |     height: 356px;
 38 |     border: solid 46px #dfdfdf;
 39 | }
 40 | 
 41 | .planet {
 42 |     background-image: linear-gradient(195deg, #ba8700, #f5c719, #e2ae09, #ce9e01, #eecd1c, #e2ae09, #eac62d, #ba9a00, #f5c719, #ba8700);
 43 |     width: 200px;
 44 |     height: 200px;
 45 |     margin: auto;
 46 |     overflow: hidden;
 47 |     position: relative;
 48 |     border-radius: 50%;
 49 |     transform-style: preserve-3d;
 50 |     transform: rotateX(-65deg) rotateY(-15deg) rotateZ(-15deg) translateY(5%);
 51 |     transition: transform 300ms cubic-bezier(0.25, 0.55, 0.3, 1.75);
 52 | }
 53 | 
 54 | .face {
 55 |     width: 100%;
 56 |     height: 100%;
 57 | }
 58 | 
 59 | .eyes {
 60 |     width: 100%;
 61 |     height: 12.5px;
 62 |     display: flex;
 63 |     justify-content: space-evenly;
 64 |     position: absolute;
 65 |     top: 40%;
 66 | }
 67 | 
 68 | .eye {
 69 |     background-color: #0a0a0a;
 70 |     height: 12.5px;
 71 |     width: 12.5px;
 72 |     position: relative;
 73 |     border-radius: 50%;
 74 | }
 75 | 
 76 | .eye:after {
 77 |     content: '';
 78 |     background-color: #f0f0f0;
 79 |     width: 20%;
 80 |     height: 20%;
 81 |     position: absolute;
 82 |     top: 20%;
 83 |     left: 20%;
 84 |     border-radius: 50%;
 85 | }
 86 | 
 87 | .blushes {
 88 |     width: 100%;
 89 |     height: 7.5px;
 90 |     display: flex;
 91 |     justify-content: space-evenly;
 92 |     position: absolute;
 93 |     top: 50%;
 94 | }
 95 | 
 96 | .blush {
 97 |     background-color: #ff5985;
 98 |     width: 15px;
 99 |     height: 7.5px;
100 |     border-radius: 50%;
101 | }
102 | 
103 | .blush:first-child {
104 |     margin-right: 15px;
105 | }
106 | 
107 | .blush:last-child {
108 |     margin-left: 15px;
109 | }
110 | 
111 | .mouth {
112 |     width: 30px;
113 |     height: 24.5px;
114 |     border: solid 4px #000000;
115 |     border-top: 0;
116 |     position: absolute;
117 |     top: 55%;
118 |     left: calc(50% - 15px);
119 |     box-sizing: border-box;
120 |     border-radius: 0 0 50% 50% / 0 0 70% 70%;
121 | }
122 | 
123 | .mask {
124 |     background-image: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.25) 30%, black 90%);
125 |     width: 125%;
126 |     height: 125%;
127 |     position: absolute;
128 |     top: 0;
129 | }


--------------------------------------------------------------------------------
/solar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="index.css">
 7 |     <title>Planet</title>
 8 | </head>
 9 | <body>
10 |     <div class="planet-wrapper">
11 |         <div class="ring ring-1">
12 |             <div class="ring ring-2">
13 |                 <div class="planet">
14 |                     <div class="face">
15 |                         <div class="eyes">
16 |                             <div class="eye"></div>
17 |                             <div class="eye"></div>
18 |                         </div>
19 |                         <div class="blushes">
20 |                             <div class="blush"></div>
21 |                             <div class="blush"></div>
22 |                         </div>
23 |                         <div class="mouth"></div>
24 |                     </div>
25 |                     <div class="mask"></div>
26 |                 </div>
27 |             </div>
28 |         </div>
29 |     </div>
30 |     <div class="planet-shadow"></div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | /* {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     
 6 | }  */
 7 | /* body{
 8 |     overflow: hidden;
 9 |     background: black;
10 | } */
11 | /* #canvas{
12 |     position: absolute;
13 |     top:0;
14 |     left:0;
15 | 
16 | } */
17 | /* #canvas1{
18 |     border: 5px solid white;
19 |     top:50%;
20 |     position:absolute ;
21 |     left: 50%;
22 |     transform: translate(-50%,-50%);
23 |     width: 600px;
24 |     height:600px ;
25 | } */
26 | 
27 | body{
28 |     margin: 0;
29 |     font-family: sans-serif;
30 | }
31 | .editor{
32 |     display: flex;
33 |     width: 100vw;
34 |     height: 100vh;
35 |     /* background: gray; */
36 | 
37 | }
38 | .toolbar{
39 |     width: 250px;
40 |     background: #eeeeee;
41 | }
42 | .toolbar-item{
43 |     padding: 15px;
44 | 
45 | }
46 | .tool-label{
47 |        display: block;
48 |        margin-bottom: 5px;
49 |        font-size: 14px;
50 |        font-weight: bold;
51 | 
52 | }
53 | .tool-input{
54 |     width: 100%;
55 | }
56 | .image-area{
57 |     flex-grow: 1;
58 |     padding: 20px;
59 |     background: gray;
60 | }
61 | #canvas{
62 |      max-width: 100%;
63 |      max-height: 100%;
64 |      
65 | 
66 | }


--------------------------------------------------------------------------------
/sunset/building.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chhavi48/Canvas-And-P5.javascript/671dc17699e081bc3ae8622b292294f87d72ba65/sunset/building.png


--------------------------------------------------------------------------------
/sunset/index.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #ccccff;
 3 |     margin: 0;
 4 |     overflow-y: hidden;
 5 |     animation:sky 5.5s 2s forwards;
 6 | }
 7 | @keyframes sky {
 8 |     50%{
 9 |         background-color: #ffd700;
10 | 
11 |     }
12 |     65%{
13 |         background-color: #ffb90f;
14 |         
15 |     }
16 |     85%{
17 |         background-color: #b39800;
18 |         
19 |     }
20 |     100%{
21 |         background-color: #68228b;
22 |         
23 |     }
24 |     
25 | }
26 | img{
27 |     position: absolute;
28 |     bottom: 0px;
29 | 
30 | }
31 | .sun
32 | {
33 |     background-color: #ff8c1a;
34 |     height: 100px;
35 |     width: 100px;
36 |     border-radius: 50%;
37 |     position:absolute;
38 | left: 50%;
39 | box-shadow: 0px 0px 20px 5px #ff8c1a;
40 | animation: sunset 15s forwards;
41 | 
42 | }
43 | @keyframes sunset {
44 |     100%{
45 |         transform: translateY(750px);
46 |     }
47 |     
48 | 
49 |     
50 | 
51 | }
52 | .moon{
53 |     background-color: transparent;
54 |     height: 100px;
55 |     width: 100px;
56 |     border-radius: 50%;
57 |     box-shadow: -20px 10px white;
58 |     position: absolute;
59 |     left: 10%;
60 |     top: 5%;
61 |     opacity: 0;
62 |     animation: night 0.8s 7s forwards;
63 | 
64 | }
65 | @keyframes night {
66 |     100%{
67 |         opacity: 1;
68 |     }
69 |     
70 | }


--------------------------------------------------------------------------------
/sunset/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <style>
 9 | body{
10 |     background-color: #ccccff;
11 |     margin: 0;
12 |     overflow-y: hidden;
13 |     animation:sky 5.5s 2s forwards;
14 | }
15 | @keyframes sky {
16 |     50%{
17 |         background-color: #ffd700;
18 | 
19 |     }
20 |     65%{
21 |         background-color: #ffb90f;
22 |         
23 |     }
24 |     85%{
25 |         background-color: #b39800;
26 |         
27 |     }
28 |     100%{
29 |         background-color: #68228b;
30 |         
31 |     }
32 |     
33 | }
34 | img{
35 |     position: absolute;
36 |     bottom: 0px;
37 | 
38 | }
39 | .sun
40 | {
41 |     background-color: #ff8c1a;
42 |     height: 100px;
43 |     width: 100px;
44 |     border-radius: 50%;
45 |     position:absolute;
46 | left: 50%;
47 | box-shadow: 0px 0px 20px 5px #ff8c1a;
48 | animation: sunset 15s forwards;
49 | 
50 | }
51 | @keyframes sunset {
52 |     100%{
53 |         transform: translateY(750px);
54 |     }
55 |   }
56 | 
57 |   .moon{
58 |     background-color: transparent;
59 |     height: 100px;
60 |     width: 100px;
61 |     border-radius: 50%;
62 |     box-shadow: -20px 10px white;
63 |     position: absolute;
64 |     left: 10%;
65 |     top: 5%;
66 |     opacity: 0;
67 |     animation: night 0.8s 7s forwards;
68 | 
69 | }
70 | @keyframes night {
71 |     100%{
72 |         opacity: 1;
73 |     }
74 |     
75 | }
76 |   
77 |   </style>
78 | 
79 |     <!-- <link rel="stylesheet" href="index.css" /> -->
80 |   </head>
81 |   <body>
82 |     <div class="sun"></div>
83 |     <img src="building.png" width="100%"/>
84 |     <div class="moon"></div>
85 |   
86 |   
87 | 
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------