html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created by Pawan Kumar -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="svgAdvace.css">
</head>
<body>
<div class="div1">
<svg width="500" height="400" viewBox="0 0 547 338" fill="none">
<rect width="547" height="358" fill="none"/>
<g id="Happy-new-year">
<path id="Vector" d="M497.178 302.322C500.025 303.343 503.082 303.599 506.054 303.065C509.026 302.53 511.814 301.224 514.148 299.271C520.091 294.18 521.955 285.793 523.471 278.026L527.956 255.054L518.567 261.652C511.814 266.397 504.909 271.294 500.234 278.167C495.558 285.04 493.518 294.422 497.274 301.858" fill="#E6E6E6"/>
<path id="Vector_2" d="M497.98 330.134C497.03 323.069 496.053 315.914 496.719 308.774C497.311 302.433 499.207 296.239 503.067 291.161C505.115 288.47 507.608 286.165 510.433 284.349C511.169 283.874 511.847 285.065 511.114 285.538C506.226 288.69 502.446 293.345 500.317 298.832C497.967 304.933 497.589 311.584 497.994 318.065C498.239 321.985 498.758 325.879 499.282 329.767C499.323 329.943 499.297 330.129 499.21 330.286C499.122 330.443 498.979 330.561 498.81 330.615C498.638 330.662 498.454 330.638 498.298 330.548C498.143 330.458 498.029 330.309 497.98 330.134V330.134Z" fill="#F2F2F2"/>
<path id="Vector_3" d="M507.134 317.633C508.355 319.527 510.034 321.068 512.008 322.108C513.982 323.148 516.185 323.651 518.406 323.57C524.112 323.293 528.869 319.229 533.151 315.371L545.816 303.959L537.434 303.55C531.406 303.255 525.222 302.981 519.48 304.878C513.738 306.775 508.443 311.34 507.393 317.405" fill="#E6E6E6"/>
<path id="Vector_4" d="M495.294 334.195C499.869 325.935 505.174 316.755 514.655 313.821C517.291 313.008 520.055 312.717 522.798 312.963C523.663 313.039 523.447 314.399 522.584 314.323C517.986 313.934 513.396 315.173 509.588 317.832C505.924 320.377 503.071 323.916 500.656 327.668C499.177 329.967 497.852 332.363 496.527 334.756C496.104 335.52 494.866 334.968 495.294 334.195V334.195Z" fill="#F2F2F2"/>
<path id="Vector_5" d="M59.9901 337.958C63.3477 337.958 66.0696 336.917 66.0696 335.632C66.0696 334.347 63.3477 333.305 59.9901 333.305C56.6324 333.305 53.9105 334.347 53.9105 335.632C53.9105 336.917 56.6324 337.958 59.9901 337.958Z" fill="#2F2E41"/>
<path id="Vector_6" d="M74.5809 337.648C77.9386 337.648 80.6605 336.607 80.6605 335.322C80.6605 334.037 77.9386 332.995 74.5809 332.995C71.2233 332.995 68.5014 334.037 68.5014 335.322C68.5014 336.607 71.2233 337.648 74.5809 337.648Z" fill="#2F2E41"/>
<path id="tinyhandright" d="M93.9508 298.543C99.6958 295.163 103.51 290.932 102.471 289.091C101.431 287.251 95.9307 288.498 90.1857 291.878C84.4406 295.258 80.6262 299.49 81.6659 301.33C82.7056 303.171 88.2057 301.923 93.9508 298.543Z" fill="#2F2E41"/>
<path id="Vector_7" d="M64.8537 327.411C78.1163 327.411 88.8678 316.44 88.8678 302.905C88.8678 289.371 78.1163 278.399 64.8537 278.399C51.5911 278.399 40.8396 289.371 40.8396 302.905C40.8396 316.44 51.5911 327.411 64.8537 327.411Z" fill="#2F2E41"/>
<path id="Vector_8" d="M61.206 322.138H53.9105V335.477H61.206V322.138Z" fill="#2F2E41"/>
<path id="Vector_9" d="M75.7968 322.138H68.5014V335.477H75.7968V322.138Z" fill="#2F2E41"/>
<path id="Vector_10" d="M70.48 305.076C75.0128 305.076 78.6873 301.327 78.6873 296.701C78.6873 292.075 75.0128 288.325 70.48 288.325C65.9472 288.325 62.2726 292.075 62.2726 296.701C62.2726 301.327 65.9472 305.076 70.48 305.076Z" fill="white"/>
<path id="Vector_11" d="M76.3241 297.542C77.3876 296.456 77.3807 294.689 76.3087 293.596C75.2368 292.503 73.5057 292.498 72.4422 293.584C71.3788 294.67 71.3856 296.437 72.4576 297.53C73.5295 298.623 75.2607 298.628 76.3241 297.542Z" fill="#3F3D56"/>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Created by Pawan Kumar */
body{
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
background-color: rgb(0, 0, 0);
}
#Balloon{
animation: wave 4s linear infinite alternate;
}
#smallhand{
animation: shake 4s linear infinite alternate;
transform-origin: right;
transform-box: fill-box;
}
#smallhandright{
transform-origin: left;
transform-box: fill-box;
animation: shake2 4s linear infinite alternate;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
//
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run