SVG Drawing & BG Animation & using HTML, CSS & JavaScript

Loading . . .

Below is the html code for this video.

index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Ganesh Chaturthi</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="top-text">
        <span id="line1"></span>
        <span id="line2"></span>
    </p>
    <p class="bottom-text">
        <span id="line3"></span>
        <span id="line4"></span>
    </p>

    <div class="container">
        <div>
            <img src="ganesha.png" alt="ganesha image" id="img-ganesha">
        </div>
    </div>

    <div class="ganesh">
        <svg id="ganesh" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px" y="0px" width="1080px" height="1620px" viewBox="0 0 1080 1620" enable-background="new 0 0 1080 1620"
            xml:space="preserve">
            <g id="ganesh-svg-g">
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1"
                        d="M451,332c0,0,0.199-0.409,0.644-1.132c0.453-0.713,1.104-1.789,2.06-3.054
              c0.937-1.285,2.158-2.78,3.65-4.423c1.486-1.652,3.289-3.392,5.341-5.221c2.086-1.777,4.421-3.645,7.058-5.396
              c2.632-1.752,5.514-3.478,8.647-4.978c0.784-0.372,1.559-0.79,2.373-1.132c0.815-0.341,1.637-0.684,2.463-1.029
              c1.651-0.7,3.377-1.274,5.111-1.864c3.5-1.083,7.122-2.012,10.808-2.59c3.679-0.611,7.405-0.916,11.065-0.976
              c3.662-0.072,7.257,0.184,10.698,0.6c3.435,0.468,6.72,1.093,9.766,1.915c1.533,0.369,2.995,0.823,4.396,1.3
              c0.699,0.236,1.387,0.467,2.062,0.694c0.676,0.218,1.333,0.448,1.96,0.728c2.527,1.052,4.833,1.98,6.779,3.045
              c1.96,1.022,3.66,1.886,4.984,2.772c1.344,0.833,2.366,1.545,3.071,2.004C554.63,313.744,555,314,555,314
              s-0.447-0.072-1.286-0.206c-0.828-0.156-2.054-0.345-3.572-0.659c-1.509-0.34-3.383-0.6-5.482-0.98
              c-2.086-0.428-4.477-0.702-7.03-1.106c-1.271-0.23-2.622-0.313-3.996-0.485c-0.686-0.084-1.383-0.169-2.091-0.256
              c-0.706-0.091-1.432-0.111-2.161-0.172c-2.91-0.282-5.974-0.398-9.12-0.487c-1.577,0.042-3.171-0.036-4.783,0.018
              c-0.805,0.037-1.614,0.075-2.428,0.113c-0.813,0.026-1.63,0.027-2.445,0.117c-1.631,0.157-3.281,0.228-4.919,0.457l-2.467,0.294
              c-0.824,0.09-1.635,0.274-2.455,0.398c-0.818,0.135-1.643,0.235-2.455,0.397l-2.431,0.505c-1.625,0.308-3.212,0.754-4.81,1.116
              c-0.787,0.225-1.571,0.449-2.352,0.673c-0.784,0.214-1.569,0.415-2.33,0.677c-1.534,0.488-3.05,0.979-4.527,1.516
              c-2.965,1.043-5.79,2.206-8.452,3.389c-2.671,1.17-5.142,2.423-7.439,3.597c-2.269,1.214-4.362,2.358-6.182,3.447
              c-1.828,1.079-3.416,2.063-4.713,2.902c-1.297,0.84-2.332,1.506-3.014,1.992C451.369,331.742,451,332,451,332z" />
                </g>
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M396,406c0,0,0.125-0.216,0.368-0.635c0.247-0.418,0.612-1.044,1.125-1.828
              c1.014-1.582,2.56-3.868,4.711-6.638c2.119-2.807,4.886-6.045,8.207-9.658c3.36-3.564,7.304-7.469,11.886-11.437
              c1.116-1.034,2.338-1.976,3.557-2.98c1.232-0.984,2.457-2.039,3.766-3.02c2.607-1.982,5.334-4.005,8.236-5.948
              c5.754-3.968,12.147-7.705,18.98-11.191c1.725-0.837,3.455-1.709,5.222-2.536c1.75-0.867,3.591-1.563,5.409-2.346
              c1.834-0.745,3.649-1.579,5.534-2.263c1.892-0.665,3.794-1.334,5.704-2.006c1.9-0.704,3.858-1.26,5.816-1.84
              c1.957-0.583,3.921-1.17,5.906-1.691c2.003-0.455,4.011-0.911,6.02-1.368l3.017-0.682c1.006-0.228,2.03-0.366,3.045-0.553
              l6.115-0.966l1.527-0.238l1.538-0.158l3.071-0.314c2.046-0.207,4.086-0.428,6.125-0.572c2.044-0.063,4.082-0.126,6.112-0.189
              c1.014-0.03,2.026-0.06,3.036-0.09l1.512-0.044l1.509,0.037c2.008,0.084,4.006,0.167,5.992,0.25
              c3.971,0.072,7.866,0.582,11.688,1.018c1.91,0.225,3.806,0.409,5.66,0.781c1.86,0.318,3.697,0.656,5.508,1.013
              c0.905,0.174,1.805,0.347,2.701,0.519c0.896,0.162,1.783,0.342,2.652,0.583c1.746,0.443,3.469,0.872,5.158,1.339
              c1.687,0.456,3.351,0.907,4.99,1.35c1.628,0.475,3.205,1.036,4.756,1.575c1.546,0.543,3.066,1.077,4.558,1.602
              c0.743,0.262,1.48,0.521,2.209,0.778c0.364,0.129,0.726,0.257,1.086,0.385c0.352,0.153,0.703,0.305,1.051,0.456
              c2.784,1.22,5.449,2.355,7.955,3.49c1.247,0.583,2.482,1.089,3.638,1.691c1.156,0.605,2.276,1.191,3.35,1.783
              c2.15,1.178,4.167,2.243,5.998,3.292c0.913,0.53,1.81,0.984,2.624,1.514c0.812,0.53,1.587,1.035,2.322,1.515
              C622.819,363.621,626,366,626,366s-3.971-0.801-10.622-2.524c-3.291-0.95-7.428-1.674-12.024-2.759
              c-1.156-0.252-2.338-0.536-3.553-0.827c-1.216-0.285-2.502-0.463-3.798-0.708c-2.601-0.463-5.305-1.008-8.124-1.541
              c-2.826-0.503-5.795-0.867-8.832-1.329c-1.527-0.195-3.051-0.511-4.624-0.688c-1.573-0.155-3.171-0.313-4.79-0.473
              c-1.618-0.15-3.246-0.346-4.893-0.535c-0.821-0.114-1.654-0.167-2.494-0.201c-0.838-0.045-1.68-0.089-2.527-0.134
              c-3.39-0.121-6.81-0.561-10.322-0.477c-3.503,0.026-7.044-0.23-10.631-0.003c-3.585,0.139-7.205,0.175-10.84,0.525
              c-1.817,0.137-3.642,0.275-5.471,0.414c-1.82,0.238-3.646,0.465-5.476,0.671l-2.747,0.319l-1.375,0.159l-1.365,0.238l-5.467,0.939
              c-0.912,0.154-1.832,0.258-2.737,0.451l-2.714,0.575c-1.81,0.381-3.618,0.761-5.423,1.141c-1.786,0.463-3.568,0.93-5.356,1.359
              c-1.785,0.44-3.573,0.854-5.314,1.416c-7.037,1.995-13.872,4.333-20.444,6.813c-1.663,0.572-3.243,1.308-4.851,1.945
              c-0.801,0.327-1.597,0.653-2.39,0.978c-0.804,0.304-1.589,0.636-2.362,0.988c-1.556,0.686-3.096,1.364-4.617,2.035
              c-0.767,0.326-1.515,0.678-2.251,1.045c-0.745,0.35-1.486,0.698-2.222,1.044c-5.904,2.744-11.375,5.639-16.417,8.394
              c-1.258,0.699-2.489,1.384-3.693,2.053c-1.206,0.671-2.342,1.388-3.494,2.032c-2.311,1.283-4.395,2.654-6.444,3.846
              c-4.005,2.495-7.514,4.72-10.357,6.636c-1.442,0.938-2.684,1.829-3.811,2.568c-1.102,0.769-2.039,1.423-2.799,1.953
              C396.803,405.401,396,406,396,406z" />
                </g>
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M401,448c0,0,0.157-0.205,0.461-0.602c0.308-0.394,0.761-0.991,1.386-1.729
              c1.234-1.498,3.102-3.642,5.608-6.254c2.503-2.614,5.647-5.69,9.418-9.045c0.926-0.864,1.925-1.694,2.95-2.559
              c1.027-0.861,2.073-1.767,3.171-2.663c2.21-1.769,4.544-3.634,7.054-5.476c4.976-3.758,10.625-7.473,16.733-11.236
              c1.538-0.921,3.119-1.818,4.721-2.725c1.597-0.918,3.223-1.834,4.902-2.696c1.668-0.883,3.357-1.775,5.081-2.641
              c1.728-0.856,3.505-1.655,5.282-2.497c7.115-3.355,14.735-6.302,22.628-8.888c1.989-0.605,3.986-1.212,5.989-1.821
              c1.005-0.293,1.999-0.632,3.019-0.889l3.069-0.748c2.05-0.496,4.103-0.992,6.159-1.489l6.242-1.219
              c4.156-0.847,8.394-1.278,12.586-1.842c2.091-0.318,4.208-0.435,6.312-0.565c2.103-0.132,4.2-0.263,6.289-0.394
              c4.189-0.085,8.348-0.128,12.448,0.007c2.049,0.127,4.086,0.253,6.108,0.378c2.02,0.139,4.025,0.224,6,0.538
              c1.974,0.269,3.932,0.535,5.871,0.799c1.936,0.268,3.856,0.484,5.724,0.942c1.871,0.4,3.722,0.796,5.551,1.186
              c0.912,0.196,1.818,0.391,2.718,0.584l1.343,0.298l1.316,0.387c3.492,1.039,6.881,2.014,10.129,3.023
              c3.195,1.214,6.268,2.376,9.191,3.536c0.729,0.292,1.45,0.581,2.164,0.867c0.707,0.302,1.389,0.652,2.071,0.969
              c1.359,0.651,2.688,1.271,3.967,1.914c1.278,0.633,2.524,1.25,3.734,1.849c0.603,0.299,1.197,0.594,1.782,0.884
              c0.566,0.335,1.123,0.664,1.671,0.988c2.184,1.312,4.231,2.503,6.086,3.665c1.859,1.153,3.582,2.155,5.023,3.286
              C638.837,410.395,642,413,642,413s-4.051-1.079-10.791-3.256c-1.669-0.578-3.585-1.051-5.646-1.595
              c-2.067-0.529-4.262-1.167-6.611-1.808c-0.585-0.163-1.18-0.329-1.783-0.497c-0.614-0.136-1.238-0.274-1.87-0.414
              c-1.26-0.278-2.556-0.565-3.887-0.859c-1.33-0.285-2.676-0.615-4.057-0.937c-0.692-0.156-1.382-0.342-2.094-0.478
              c-0.717-0.119-1.441-0.24-2.174-0.362c-2.9-0.518-5.92-1.059-9.046-1.617c-3.156-0.366-6.386-0.813-9.7-1.235
              c-3.322-0.371-6.754-0.565-10.228-0.871c-1.734-0.182-3.508-0.164-5.285-0.243c-1.776-0.059-3.57-0.119-5.378-0.179
              c-1.801-0.121-3.634,0.045-5.466,0.028c-1.832,0.02-3.678,0.04-5.535,0.06c-1.855,0.031-3.722,0.232-5.594,0.338
              c-1.873,0.111-3.756,0.176-5.643,0.318c-1.884,0.204-3.775,0.408-5.672,0.613c-1.894,0.224-3.8,0.344-5.696,0.662
              c-3.795,0.571-7.618,1.017-11.396,1.83l-5.695,1.021c-1.883,0.428-3.764,0.855-5.642,1.282c-3.767,0.794-7.477,1.826-11.181,2.755
              c-1.855,0.458-3.657,1.085-5.485,1.592c-1.818,0.541-3.658,0.984-5.437,1.596c-3.568,1.185-7.129,2.271-10.581,3.519
              c-6.95,2.364-13.563,5.027-19.867,7.554c-3.114,1.344-6.188,2.587-9.107,3.915c-1.471,0.649-2.917,1.287-4.336,1.913
              c-1.408,0.655-2.79,1.298-4.144,1.928c-5.439,2.499-10.378,4.946-14.765,7.148c-4.386,2.205-8.188,4.213-11.335,5.878
              c-3.131,1.685-5.608,3.023-7.288,3.96C401.9,447.498,401,448,401,448z" />
                </g>
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1"
                        d="M626,440c2.619,3.007,4.788,6.394,6.834,9.837c2.047,3.452,3.82,7.062,5.473,10.733
              c0.769,1.855,1.612,3.693,2.308,5.582l1.088,2.824l0.996,2.857c1.315,3.819,2.408,7.709,3.42,11.626
              c0.984,3.923,1.804,7.887,2.51,11.876c0.69,3.988,1.284,8.003,1.676,12.035l0.326,3.025l0.229,3.03
              c0.125,2.021,0.345,4.046,0.382,6.071l0.192,6.081c0.027,2.027-0.003,4.052-0.003,6.081c-0.009,1.014,0.004,2.03-0.023,3.044
              l-0.121,3.037c-0.1,2.024-0.152,4.055-0.294,6.077c-0.337,4.035-0.566,8.094-1.081,12.112c-0.227,2.013-0.458,4.029-0.719,6.039
              l-0.918,6.006c-0.553,4.02-1.402,7.974-2.12,11.964c-0.349,1.998-0.848,3.957-1.283,5.933l-1.345,5.921
              c-0.985,3.922-2.027,7.828-3.049,11.744l-3.497,11.607l-3.844,11.487l-0.809,1.592l0.067-0.099
              c0.007-0.009-0.011,0.024-0.015,0.034l-0.048,0.09l-0.144,0.296c-0.101,0.202-0.205,0.47-0.313,0.698
              c-0.201,0.516-0.401,1.046-0.577,1.61c-0.345,1.124-0.636,2.306-0.799,3.53c-0.358,2.44-0.352,4.992-0.028,7.557
              c0.282,2.57,1.035,5.154,1.935,7.707l0.745,1.91l0.09,0.24l0.045,0.12c0.046,0.107-0.328-0.722-0.153-0.339l0.034,0.068
              l0.276,0.542l0.551,1.083l1.103,2.167c0.182,0.383,0.37,0.694,0.557,0.987l0.56,0.911l2.215,3.655l2.58,3.965
              c1.694,2.651,3.51,5.293,5.314,7.936c1.791,2.642,3.611,5.295,5.449,7.936c1.824,2.647,3.66,5.29,5.53,7.922l22.458,31.635
              l11.223,15.888l5.601,7.969l5.543,8.033c3.679,5.405,7.368,10.713,10.924,16.446c0.897,1.476,1.757,2.733,2.745,4.662l0.705,1.338
              l0.174,0.335l0.087,0.167l0.043,0.084c0.108,0.224-0.098-0.21-0.066-0.141l0.261,0.549l0.261,0.549l0.204,0.37l0.196,0.366
              c0.061,0.117,0.125,0.241,0.232,0.422c1.497,2.615,3.29,5.496,4.902,8.438c3.285,5.895,6.229,12.175,8.322,18.781
              c2.096,6.6,3.333,13.536,3.521,20.486c0.142,6.955-0.807,13.9-2.766,20.458c-1.928,6.573-4.825,12.749-8.315,18.452
              c-3.456,5.739-7.702,10.872-12.132,15.713c-1.136,1.189-2.232,2.408-3.404,3.554l-3.589,3.351
              c-1.171,1.136-2.422,2.187-3.674,3.233L697,893c4.268-4.917,8.517-9.798,12.163-15.098c3.706-5.233,7.069-10.682,9.677-16.419
              c2.649-5.708,4.663-11.639,5.813-17.664c1.121-6.028,1.449-12.132,0.776-18.122c-0.703-5.983-2.172-11.853-4.458-17.454
              c-2.253-5.618-5.156-10.981-8.544-16.198l-5.351-8.088c-0.109-0.163-0.248-0.389-0.389-0.623l-0.412-0.686l-0.403-0.683
              l-0.29-0.534l-0.29-0.534c0.01,0.023-0.221-0.455-0.138-0.275l-0.032-0.048l-0.063-0.097l-0.125-0.194l-0.493-0.777
              c-0.53-0.94-1.544-2.336-2.407-3.581l-1.329-1.905l-1.417-1.93l-2.816-3.871l-5.768-7.749l-23.353-31.056l-11.586-15.66
              c-3.859-5.235-7.659-10.509-11.439-15.821c-1.9-2.642-3.779-5.312-5.651-7.992c-1.875-2.674-3.764-5.338-5.579-8.084
              c-1.834-2.722-3.674-5.435-5.456-8.257l-2.696-4.204l-2.775-4.691l-0.688-1.176c-0.237-0.398-0.459-0.786-0.623-1.137
              l-1.089-2.173l-0.545-1.087l-0.272-0.543l-0.034-0.068l-0.217-0.477l-0.063-0.164l-0.125-0.329l-0.977-2.637
              c-1.196-3.568-2.18-7.279-2.56-11.169c-0.416-3.87-0.368-7.857,0.295-11.821c0.316-1.982,0.821-3.955,1.474-5.912l0.529-1.467
              l0.62-1.467c0.243-0.502,0.459-0.98,0.734-1.496l0.424-0.779l0.258-0.435l0.138-0.229l0.229-0.356l-0.809,1.591l4.036-10.952
              l3.712-11.056l3.4-11.146c0.992-3.749,2.089-7.481,3.002-11.25c0.888-3.773,1.913-7.528,2.643-11.333l1.189-5.697l1.017-5.724
              c0.748-3.812,1.212-7.655,1.791-11.493c0.262-1.921,0.436-3.849,0.659-5.775l0.329-2.891c0.101-0.964,0.161-1.93,0.245-2.896
              c0.148-1.931,0.328-3.865,0.452-5.8l0.263-5.81c0.106-1.94,0.077-3.875,0.127-5.816l0.039-2.912l-0.057-2.909
              c-0.039-1.94-0.051-3.886-0.187-5.821c-0.128-1.935-0.141-3.888-0.339-5.819c-0.18-1.932-0.288-3.881-0.526-5.809
              c-0.245-1.926-0.43-3.87-0.717-5.794c-0.546-3.855-1.196-7.704-2.026-11.517l-0.606-2.869l-0.7-2.847
              c-0.438-1.911-1.023-3.774-1.539-5.669c-1.144-3.747-2.438-7.454-3.892-11.116C629.696,447.007,628.047,443.407,626,440z" />
                </g>
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1"
                        d="M540,647c0,0,0.218,0.817,0.689,2.317c0.456,1.502,1.231,3.672,2.274,6.382
              c2.118,5.403,5.483,12.967,10.688,21.196c2.593,4.114,5.638,8.389,9.16,12.62c3.514,4.237,7.522,8.415,11.969,12.371
              c1.134,0.963,2.277,1.933,3.428,2.911c1.185,0.934,2.378,1.875,3.578,2.822c1.242,0.891,2.491,1.787,3.747,2.687
              c1.285,0.857,2.577,1.718,3.874,2.583c1.333,0.809,2.672,1.621,4.015,2.436c1.38,0.754,2.762,1.512,4.134,2.293
              c2.931,1.567,5.874,3.14,8.817,4.713c5.867,3.213,11.746,6.423,17.461,9.742c1.431,0.827,2.856,1.651,4.275,2.47
              c1.407,0.842,2.808,1.68,4.2,2.513c2.779,1.678,5.526,3.34,8.189,5.049c10.684,6.768,20.389,13.712,28.061,20.585
              c3.826,3.445,7.141,6.861,9.802,10.142c2.663,3.277,4.665,6.415,5.979,9.155c1.332,2.736,1.962,5.043,2.299,6.601
              c0.184,0.776,0.213,1.399,0.282,1.799C686.973,790.791,687,791,687,791s-0.335-0.788-1.014-2.185
              c-0.695-1.395-1.905-3.326-3.687-5.541c-1.796-2.209-4.224-4.666-7.258-7.203c-3.029-2.543-6.644-5.187-10.738-7.88
              c-4.094-2.696-8.665-5.445-13.572-8.259c-4.902-2.822-10.155-5.692-15.614-8.645c-10.996-5.875-22.725-12.141-34.455-18.408
              c-2.932-1.607-5.864-3.215-8.784-4.816c-1.518-0.867-3.026-1.745-4.518-2.638c-1.459-0.95-2.913-1.898-4.361-2.841
              c-1.405-1.008-2.805-2.013-4.198-3.012c-1.338-1.072-2.669-2.138-3.993-3.198c-1.273-1.119-2.539-2.231-3.796-3.335
              c-1.208-1.158-2.401-2.312-3.56-3.479c-4.609-4.699-8.566-9.699-11.876-14.693c-3.309-5-5.96-10-8.049-14.744
              c-4.188-9.503-6.046-17.939-6.886-23.821c-0.431-2.947-0.553-5.286-0.63-6.869C539.951,647.846,540,647,540,647z" />
                </g>
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M344,874c0,0,1.055,1.769,3.105,5.022c2.03,3.263,5.154,7.958,9.209,13.838
              c4.08,5.865,9.144,12.891,15.253,20.672c6.105,7.779,13.235,16.335,21.478,25.154c4.122,4.407,8.494,8.905,13.191,13.355
              c4.684,4.46,9.626,8.94,14.901,13.274c10.517,8.695,22.254,16.956,35.108,23.918c6.445,3.442,13.147,6.582,20.104,9.226
              c3.468,1.351,7.022,2.505,10.604,3.593c1.786,0.562,3.605,1.019,5.41,1.538c1.824,0.44,3.648,0.902,5.486,1.307
              c7.36,1.6,14.886,2.561,22.467,3.006c3.791,0.229,7.602,0.244,11.413,0.152l0.715-0.011l0.7-0.023l1.533-0.062l3.067-0.125
              l5.986-0.289c8.023-0.389,16.022-0.968,23.941-1.767c7.918-0.814,15.775-1.723,23.484-2.999
              c7.712-1.263,15.297-2.742,22.684-4.539c3.693-0.899,7.338-1.875,10.915-2.952c3.587-1.052,7.114-2.183,10.576-3.396
              c13.841-4.871,26.584-11.124,37.785-18.531c11.22-7.376,20.938-15.8,29.187-24.4c8.276-8.584,15.155-17.27,20.926-25.251
              c5.77-7.991,10.449-15.278,14.234-21.339c3.738-6.089,6.661-10.922,8.565-14.263C747.966,884.777,749,883,749,883
              s-0.166,0.487-0.487,1.43c-0.331,0.939-0.776,2.354-1.45,4.16c-1.323,3.622-3.245,8.956-6.055,15.612
              c-2.807,6.657-6.454,14.666-11.28,23.592c-4.834,8.914-10.903,18.737-18.725,28.719c-7.806,9.971-17.486,20.039-29.177,29.036
              c-11.667,9.008-25.329,16.837-40.198,22.852c-7.417,3.053-15.136,5.659-23.03,7.87c-3.943,1.135-7.938,2.12-11.957,3.086
              c-4.026,0.915-8.088,1.759-12.172,2.499c-16.336,3.071-33.046,4.713-49.7,5.652l-6.282,0.278l-3.068,0.103l-1.533,0.051
              l-0.833,0.022l-0.819,0.009c-4.365,0.076-8.733,0.022-13.081-0.269c-8.701-0.516-17.308-1.892-25.661-3.886
              c-8.363-1.978-16.438-4.723-24.133-7.988c-7.695-3.264-15.054-6.984-21.928-11.176c-13.793-8.324-25.858-18.061-36.34-28.085
              c-5.215-5.047-10.078-10.135-14.552-15.237c-4.461-5.114-8.6-10.177-12.383-15.168c-7.566-9.985-13.828-19.567-18.984-28.26
              c-5.15-8.699-9.214-16.5-12.34-23.018c-3.149-6.506-5.299-11.764-6.753-15.34c-0.728-1.788-1.229-3.184-1.572-4.12
              C344.172,874.485,344,874,344,874z" />
                </g>
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M625.742,504.208c0,0-1.402-0.502-3.971-1.102c-1.278-0.301-2.841-0.615-4.629-0.932
              c-1.797-0.283-3.821-0.567-6.031-0.731c-2.205-0.184-4.594-0.276-7.096-0.18c-2.501,0.06-5.112,0.304-7.757,0.723
              c-2.648,0.422-5.305,1.127-7.939,1.922c-2.606,0.894-5.201,1.897-7.613,3.246c-2.453,1.258-4.672,2.925-6.731,4.645
              c-1.021,0.88-1.964,1.835-2.961,2.671c-0.91,0.962-1.857,1.836-2.797,2.692c-0.898,0.913-1.805,1.783-2.742,2.595
              c-0.879,0.878-1.763,1.727-2.656,2.533c-0.888,0.808-1.686,1.685-2.508,2.488c-0.42,0.4-0.833,0.793-1.238,1.178
              c-0.389,0.407-0.77,0.806-1.144,1.198c-0.746,0.789-1.502,1.528-2.225,2.238c-0.727,0.71-1.344,1.444-2.005,2.089
              c-1.285,1.313-2.487,2.445-3.416,3.434c-0.972,0.964-1.768,1.723-2.343,2.23c-0.567,0.511-0.896,0.775-0.896,0.775l-1.089-0.505
              c0,0,0.009-0.415,0.077-1.179c0.06-0.768,0.194-1.878,0.407-3.293c0.116-0.703,0.23-1.492,0.436-2.318
              c0.215-0.822,0.45-1.716,0.734-2.662c0.279-0.949,0.581-1.961,0.971-3.001c0.421-1.023,0.866-2.106,1.374-3.219
              c0.252-0.558,0.495-1.138,0.792-1.701c0.311-0.559,0.627-1.128,0.949-1.707c0.338-0.572,0.681-1.154,1.03-1.745
              c0.341-0.599,0.71-1.192,1.142-1.758c0.829-1.155,1.687-2.347,2.637-3.508c1.006-1.121,2.084-2.226,3.204-3.322
              c1.196-1.027,2.46-2.021,3.767-2.976c1.37-0.891,2.771-1.759,4.215-2.568c2.96-1.521,5.982-2.971,9.13-4.081
              c3.103-1.211,6.341-1.999,9.512-2.62c3.19-0.56,6.354-0.808,9.389-0.801c3.033,0.032,5.941,0.194,8.648,0.639
              c2.711,0.393,5.224,0.956,7.502,1.574c2.285,0.59,4.313,1.342,6.097,1.994c1.775,0.688,3.293,1.341,4.514,1.946
              c2.443,1.178,3.774,2.018,3.774,2.018L625.742,504.208z" />
                </g>
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M427.352,508.489c0,0,1.279-0.999,3.645-2.515c2.378-1.505,5.889-3.51,10.416-5.384
              c2.262-0.939,4.791-1.794,7.535-2.575c1.386-0.329,2.805-0.736,4.303-0.959c0.746-0.124,1.499-0.276,2.269-0.379
              c0.775-0.086,1.557-0.173,2.346-0.261c3.168-0.243,6.536-0.359,9.944,0.198l1.285,0.171l1.277,0.27
              c0.851,0.193,1.72,0.344,2.568,0.584c1.681,0.53,3.411,0.999,5.034,1.753c3.346,1.307,6.437,3.171,9.413,5.135
              c0.699,0.544,1.395,1.085,2.088,1.624c0.693,0.543,1.398,1.084,1.987,1.706c0.615,0.603,1.232,1.202,1.817,1.823l0.875,0.928
              l0.771,0.981c0.493,0.665,0.992,1.319,1.455,1.988l0.696,0.994c0.224,0.334,0.398,0.688,0.597,1.028
              c0.761,1.376,1.484,2.738,2.109,4.085c0.575,1.361,1.06,2.716,1.554,4.002c0.495,1.294,0.787,2.585,1.102,3.816
              c0.305,1.23,0.598,2.406,0.794,3.537c0.156,1.143,0.312,2.217,0.412,3.236c0.116,1.013,0.193,1.965,0.261,2.84
              c0.007,0.89,0.015,1.702-0.006,2.44c-0.041,1.476-0.104,2.629-0.181,3.42c-0.068,0.789-0.132,1.212-0.132,1.212l-1.164,0.294
              c0,0-0.278-0.335-0.748-0.969c-0.478-0.631-1.13-1.564-1.921-2.743c-0.396-0.589-0.802-1.247-1.247-1.957
              c-0.478-0.695-0.993-1.441-1.509-2.242c-0.532-0.795-1.05-1.652-1.602-2.544c-0.555-0.889-1.213-1.772-1.812-2.727
              c-1.174-1.934-2.624-3.843-3.97-5.929c-0.739-0.992-1.52-1.974-2.239-3.027c-0.346-0.54-0.754-1.027-1.148-1.527
              c-0.401-0.497-0.775-1.021-1.161-1.543l-0.562-0.8c-0.211-0.242-0.414-0.493-0.617-0.747c-0.413-0.5-0.802-1.03-1.199-1.562
              c-0.377-0.558-0.846-1.007-1.27-1.52c-0.434-0.508-0.87-1.018-1.308-1.53c-1.865-1.897-3.915-3.771-6.321-5.084
              c-1.156-0.752-2.436-1.258-3.684-1.857c-0.634-0.275-1.298-0.47-1.947-0.714l-0.979-0.351l-1.006-0.265
              c-2.664-0.777-5.442-1.155-8.172-1.376c-2.74-0.214-5.438-0.045-8.018,0.135c-2.573,0.266-5.025,0.634-7.269,1.134
              c-2.243,0.495-4.309,1.011-6.111,1.575c-1.812,0.541-3.365,1.107-4.654,1.563c-2.566,0.96-3.963,1.637-3.963,1.637
              L427.352,508.489z" />
                </g>
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" d="M561,573c0,0,9.389-47.167,61.444-35.333
          C622.444,537.667,617,585.5,561,573z" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10"
                    d="M613.5,530.5c0,0-52.5-19-52.5,39.5" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" d="M489,575.083c0,0-0.5-43.75-58.5-37.417
          C430.5,537.667,436.5,587.167,489,575.083z" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10"
                    d="M437.5,533c0,0,50.5-18.5,51.5,40" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" d="M499.5,425c0,0,11.5,1.5,11.5,31.5
          s-0.5,36.5,0,39.5s17,28.5,32,0v-51.5c0,0,3.5-15.5,12-18" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10"
                    d="M479,450.5c0,0,46.5,24,91-2.5" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10"
                    d="M472.5,473.997c0,0,53.143,24,104-2.5" />
                <g>
                    <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M215,817.5c0,0,0.619,0.407,1.781,1.139c1.15,0.744,2.894,1.754,5.085,3.013
              c2.204,1.242,4.887,2.703,8.013,4.198c3.124,1.495,6.672,3.061,10.59,4.462c3.919,1.386,8.197,2.648,12.722,3.46
              c4.523,0.797,9.285,1.213,14.079,0.869c2.4-0.136,4.795-0.52,7.186-0.986c0.592-0.145,1.185-0.291,1.78-0.438l0.446-0.108
              l0.223-0.054l0.056-0.013c0.07-0.017-0.417,0.105-0.181,0.044l0.126-0.04l1.011-0.318l2.023-0.617l1.572-0.623l0.79-0.301
              c0.271-0.109,0.569-0.258,0.852-0.385l1.725-0.787c0.576-0.26,1.142-0.593,1.715-0.884c0.572-0.304,1.156-0.563,1.725-0.895
              c2.285-1.284,4.566-2.653,6.788-4.205c4.508-2.989,8.854-6.429,13.128-9.915c2.119-1.792,4.222-3.57,6.299-5.327
              c2.069-1.81,4.113-3.599,6.124-5.357c4.061-3.575,7.986-7.031,11.708-10.308c3.778-3.271,7.423-6.335,10.887-9.08
              c3.472-2.736,6.749-5.167,9.795-7.162c3.049-1.99,5.801-3.598,8.188-4.717c1.181-0.574,2.279-1.014,3.225-1.381
              c0.978-0.323,1.783-0.617,2.456-0.806c1.367-0.336,2.081-0.478,2.081-0.478s-0.602,0.419-1.731,1.203
              c-0.551,0.396-1.199,0.943-1.96,1.543c-0.376,0.311-0.757,0.685-1.176,1.052c-0.416,0.374-0.869,0.741-1.313,1.194
              c-1.825,1.711-3.917,3.919-6.252,6.5c-2.336,2.582-4.894,5.587-7.677,8.889c-2.804,3.308-5.842,6.892-9.056,10.682
              c-3.262,3.778-6.749,7.758-10.525,11.775c-1.87,2.028-3.848,4.027-5.869,6.048c-1.024,1.003-2.054,2.013-3.089,3.027
              c-1.072,0.986-2.129,1.991-3.231,2.973c-4.359,3.973-9.095,7.771-14.205,11.259c-2.558,1.727-5.269,3.317-8.042,4.815
              c-1.404,0.733-2.84,1.421-4.298,2.062l-2.23,0.905c-0.377,0.148-0.728,0.302-1.126,0.445l-1.229,0.414
              c-0.819,0.268-1.637,0.536-2.453,0.804c-0.693,0.174-1.383,0.348-2.073,0.522l-1.031,0.245l-0.129,0.031l-0.309,0.076
              l-0.074,0.013l-0.295,0.051l-0.588,0.101c-0.783,0.132-1.564,0.264-2.343,0.395c-3.129,0.398-6.241,0.653-9.279,0.495
              c-6.086-0.14-11.795-1.406-16.905-3.097c-5.113-1.727-9.617-3.989-13.544-6.334c-7.829-4.773-13.317-9.934-16.844-13.749
              c-1.776-1.901-3.028-3.524-3.883-4.611C215.397,818.127,215,817.5,215,817.5z" />
                </g>
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M259,670c0,0-67.5,35.5-51,99.5s84,54.5,116,15s13.5-63,9.5-63s-20,29.5-25,30.5s-11-4-9.5-13.5s1-60-15-66
          S271.5,669,259,670z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M819.5,675c0,0,4,7,11,15s35.5,33.5,26.5,51.5s-16.26,15-17.88,22.5c-1.62,7.5-2.14,26,19.62,7.5
          C880.5,753,888.5,725.969,893,727.234s6,9.766,3.5,21.266s-20,48.5-41,57.5c-20,13-42,29.5-93.5,11s10-54.5,10-56
          s8.5-2.5-10.5-20.5S805,671.5,819.5,675z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1"
                    d="M376.5,491c0,0-25.5,35-80.5,20.5c0,0-18,31,60.5,94.5C356.5,606,338.809,544.356,376.5,491z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M376.5,460.463c0,0-37.5,18.037-88.5-12.463s-71.5-13.5-73-13.5s24.5,8.457,25.5,43.228s0,73.938,24,97.355
          c24,23.417,76.5,63.417,84,71.917s21,29,20.5,32s15-18.5-59.5-98.5C297,566,267.345,527.26,284,491
          C284,491,347.443,524.415,376.5,460.463z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1"
                    d="M669,475.5c0,0,37,36,30,109.5c0,0,45.5-25,53.5-103.5C752.5,481.5,720,505,669,475.5z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M664,445c0,0,43.329,1.552,66.164-15.224C753,413,786.148,389.5,819.574,394c0,0-34.574,16-15.574,81.5
          S700.5,616.5,703.5,653c0,0-15.5-9,20.5-68s54.5-67.574,35.5-124.537C759.5,460.463,701.5,502,664,445z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M388.333,471.497c0,0-5.667,185.503,133.167,257.503s188.109,96,154.804,154.667
          C643,942.333,569.487,959.665,475,946.038C380.513,932.411,401,853,401,853s15.333-72.667,92-44.667
          c0,0-85.167,15.333-33.25,94.667s155.917,22,174.583,4.667c18.667-17.333,51.333-64-30.667-106s-167.911-71.786-196-139.333
          C379.667,595,378.333,584.661,388.333,471.497z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1"
                    d="M215,843.667c0,0,6,28,36.667,24c0,0-39.333,55.333,10,140.667s163.333,141.333,184,140
          c20.667-1.333,63.333,13.333,74-100.667c0,0,26,108.667-19.333,129.333c0,0-88,29.333-231.333-104S215,843.667,215,843.667z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M540,1049.667c0,0,60.333,98,169.667,56s161.333-80,171.333-132c10-52,1.333-104-96.667-130
          c0,0,80-22,103.333,24c23.333,46,38.667,91.333,6.667,140.667s-109.333,116-226,119.333c-116.667,3.333-105.333-8-105.333-8
          S552.333,1117.667,540,1049.667z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M540,1117c0,0,33.667,51.333,21,71.333s-37.333,12-46.667,4c0,0,36.667,66,71.333,34.667
          C620.333,1195.667,584.333,1131.667,540,1117z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M599.534,1147.667c0,0,33.466,16.667,60.799,0c0,0-1.111,40-37.889,44.667
          C622.444,1192.333,632.735,1176.333,599.534,1147.667z" />
                <path fill="#fff" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M730.667,1156.333c0,0,6.333-15,19.333-12s1.333,17.667-9.667,17.667c0,0-2.667,12.667,13.333,10.667
          s53.333,21,32.667,66.333c0,0,9,11.667,20.667,1.667s-2.667-68.667,30.667-76.333c0,0-24,2-24,75C813,1255,786,1260.667,768,1249
          c0,0,8.333,19.667-25.333,15.333c0,0,25.333-6.667,18-16.333c-7.333-9.667-28-19.333-18.667-21s16-5.333,8-9s-48-2.333-64-23.333
          c-4.333-5.333,20,9.227,30.333,9.78c10.333,0.553,16.535-3.78,9.934-13.447s-14.934-1.333-26.601-16.333c0,0,12.333-0.667,19-8.667
          c0,0-13.333-11.793-1-22.063C730,1133.667,730,1151,730.667,1156.333z" />
                <circle fill="#fff" cx="528.108" cy="563.876" r="13.108" />
                <circle fill="#fff" cx="531.358" cy="592.858" r="9.858" />
                <circle fill="#fff" cx="535.887" cy="622.779" r="7.779" />
                <circle fill="#fff" cx="529.167" cy="520.333" r="4.667" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M568.757,555.423c0,0,10.938,13.579,22.965,8.453S605.25,547.58,599,537.04l-7.278,0.888
          c0,0,6.028,6.572,2.028,8.572s-7.5-6.432-7.5-6.432l-5.172,2.929c0,0,6.044,3.003,4.608,6.753s-8.677-0.838-7.931-4.294
          L568.757,555.423z" />
                <path fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="1" d="M482.479,555.423c0,0-6.979,14.577-19.229,11.827s-17.502-7.463-17-18.75s3.504-11.034,3.504-11.034
          l8.327,1.465c0,0-5.831,6.569-0.581,9.569s6.848-7.562,6.848-7.562l5.303,2.536c0,0-9.151,4.837-3.151,9.056
          c6,4.22,7.975-5.826,7.975-5.826L482.479,555.423z" />
            </g>
        </svg>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
</body>

</html>

Below is the css code for this video.

style.css


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100%;
    background-image: radial-gradient(#FBD72B, #F9484A);
    overflow: hidden;
}

p {
    position: absolute;
    width: 100%;
    color: #ffffff;
    text-shadow: 2px 0px 4px #000000;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 5px;
}

p span {
    display: block;
}

.top-text {
    top: 2.5%;
}

.bottom-text {
    bottom: 2.5%;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 75%;
    width: 60%;
    z-index: 1;
    overflow: hidden;
}

#img-ganesha {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: scale-down;
    z-index: 1;
    opacity: 0;
}

.ganesh {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

#ganesh {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
}

@keyframes drawGanesh {
    to {
        stroke-dashoffset: 0;
    }
}

Below is the javascript code for this video.

index.js


function drawSVG() {
    var ganesh = document.querySelectorAll("#ganesh path");

    ganesh.forEach((each) => {
        each.style.fill = "none";
    });

    ganesh.forEach((each, index) => {
        var pathLength = ganesh.item(index).getTotalLength();
        each.setAttribute("id", `p${index}`);
        var eachId = document.getElementById(`p${index}`);
        eachId.style.strokeDasharray = pathLength;
        eachId.style.strokeDashoffset = pathLength;
        eachId.style.animation = "drawGanesh 5s ease-in-out";
    });

    setTimeout(() => {
        ganesh.forEach((each, index) => {
            ganesh.item(index).getTotalLength();
            each.removeAttribute("style");
        });
    }, 5000);
}

drawSVG();

const sleep = (miliSecond) => new Promise(resolve => setTimeout(resolve, miliSecond));

function HideSVGShowImg() {
    setTimeout(async () => {
        var isSvgDone = true;
        if (isSvgDone === true) {
            for (i = 9; i >= 1; i--) {
                document.getElementById("ganesh-svg-g").style.opacity = "0." + i;
                await sleep(i * 31.25);
            }

            if (document.getElementById("ganesh-svg-g").style.opacity === "0.1")
                document.getElementById("ganesh-svg-g").style.opacity = "0";

            await sleep(125);
            document.body.style.backgroundImage = "radial-gradient(#AD1DEB, #6E72FC)";
            await sleep(125);

            for (j = 0; j <= 9; j++) {
                document.getElementById("img-ganesha").style.opacity = "0." + j;
                await sleep(j * 31.25);
            }
            if (document.getElementById("img-ganesha").style.opacity === "0.9")
                document.getElementById("img-ganesha").style.opacity = "1";

            isSvgDone = false;
        }
    }, 10000);
}

HideSVGShowImg();

$(document).ready(function () {
    const theLetters = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM@#$&";
    const line1text = "Om gan ganpataye namo namah |";
    const line2text = "Shri sidhivinayak namo namah |";
    const line3text = "Ashta vinayak namo namaha |";
    const line4text = "Ganapathi bappa moraya ||";
    const speed = 30;
    const maxCharOfLine = Math.max(line1text.length, line2text.length, line3text.length, line4text.length);
    var increment = 8;
    var indexOfString = 0;
    var stringIndex = 0;
    var blankString = "";
    var fixedCharOfLine1 = "";
    var fixedCharOfLine2 = "";
    var fixedCharOfLine3 = "";
    var fixedCharOfLine4 = "";

    (function flippingText(i) {
        setTimeout(function () {
            if (--i)
                flippingText(i);

            nextFrame(i);
            indexOfString++;
        }, speed);
    })(maxCharOfLine * increment + 1);

    function nextFrame() {
        for (var i = 0; i < maxCharOfLine - stringIndex; i++) {
            var num = Math.floor(theLetters.length * Math.random());
            var letter = theLetters.charAt(num);
            blankString += letter;
        }

        if (indexOfString == (increment - 1))
            stringIndex++;

        if (indexOfString == increment) {
            fixedCharOfLine1 += line1text.charAt(stringIndex - 1);
            fixedCharOfLine2 += line2text.charAt(stringIndex - 1);
            fixedCharOfLine3 += line3text.charAt(stringIndex - 1);
            fixedCharOfLine4 += line4text.charAt(stringIndex - 1);
            indexOfString = 0;
        }

        $("#line1").html(fixedCharOfLine1 + blankString);
        $("#line2").html(fixedCharOfLine2 + blankString);
        $("#line3").html(fixedCharOfLine3 + blankString);
        $("#line4").html(fixedCharOfLine4 + blankString);
        blankString = "";
    }
});

Thanks for visiting

Create 3D Cubes Spin into New Year using HTML, CSS & JavaScript

Create a Mental Wellness Partner Website using HTML, CSS & JavaScript

Create a Mesmerizing Marquee Text using HTML & CSS

Create a QR Code Login Template using HTML, CSS & JavaScript

Create a Stunning Matrix Like Rain Effect using HTML, CSS & JavaScript

Create Spectacular Diwali Animation using HTML, CSS & JavaScript

Create a Trippy Loader using HTML & CSS

Create Super Smooth Gradient Animation using HTML, CSS & JavaScript

Create a Whimsical Snow Ball Loader using HTML & CSS

Create a Minimalist Web Developer Portfolio using HTML, CSS & JavaScript

Create a Dizzying Text Spirals using HTML, CSS & JavaScript

Create an Advertisement Brand Website using HTML & CSS

Create a Bouncing Responsive Menu using HTML & CSS

Create Barrel Effect using HTML, CSS & JavaScript

Create Dazzling Neon Loops & Orbs using HTML & CSS

Create Incredible 3d Cube Animation using HTML & CSS

Create Sublime Shiva Animation using HTML & CSS

Create Hypnotic and Colourful Magical Rings using HTML & CSS

Create a 3d Spinning Rings Animation using HTML & CSS

Create a Beautiful Background Animation using HTML & CSS

Create a 7 Segment Neon Digital Clock using HTML, CSS & JavaScript

Create a Satisfying Abacus Clock using HTML, CSS & JavaScript

Create a 3d Loading Text Animation using HTML & CSS

Create a 3d Effect Loading Spinner using HTML & CSS

Create a Fireworks Typing Effect using HTML, CSS & JavaScript

Create Hypnotic Ellipses and Springs using HTML & CSS

Create a Visual Symphony using HTML & CSS

Create a Glowing Blue Tinted Button using HTML & CSS

Create a Modern Team Page using HTML & CSS

Create Animated Rings Login Form using HTML & CSS

Create Bubble Adventure using HTML, CSS & JavaScript

Spectral Spin Circles using HTML & CSS

3D Room 404 Errorverse using HTML & CSS

Team Spotlight using HTML & CSS

Fireflower Fiery Flourish using HTML & CSS

Luxury Tourism Website using HTML & CSS

Company Website Template using HTML & CSS

Nature's Nest Soap using HTML & CSS

Pawfect Wellness using HTML & CSS

Account Creation Hub using HTML & CSS

Accelerate Login Form using HTML & CSS

Valentine Art Love Pixels using HTML, CSS & JavaScript

Animated Valentine's Delight using HTML & CSS

A Tapestry of Eternal Love using HTML & CSS

Gleaming Moments Wedding Invitation using HTML & CSS

Elevate your Login Experience using HTML & CSS

Snowy New Year Celebration using HTML, CSS & JavaScript

Frosty Interactive Christmas Delight using HTML, CSS & JavaScript

Quest Search Page Template using HTML, CSS & JavaScript

Creative Button Artistry using HTML, CSS & JavaScript

Elevate Search Horizon Template using HTML, CSS & JavaScript

Joyful Cake & Balloon Animation using HTML, CSS & JavaScript

Explore Search Page Template using HTML, CSS & JavaScript

Minimal Search Page Template using HTML & CSS

Soothing Gradient Elegance using HTML & CSS

Interactive Profile Card using HTML & CSS

Chic Navbar Navigation using HTML & CSS

Search Page Template using HTML, CSS & JavaScript

Evolving Abstract Art using HTML, CSS & JavaScript

Happy Diya-Lit Diwali using HTML & CSS

Interactive Text Split Effect using HTML & CSS

Artistic Triangle Symphony using HTML & CSS

Button Burst Visual Delight using HTML, CSS & JavaScript

Elegance Animated Typing using HTML, CSS & JavaScript

Journey of Lord Rama using HTML, CSS & JavaScript

Divine Goddesses Gallery using HTML, CSS & JavaScript

Morphing Transition Menu using HTML & CSS

Sticky Smooth Slider Nav using HTML, CSS & JavaScript

Dazzling Neon Typography using HTML & CSS

Glowing Backlight Effect using HTML & CSS

Order Process Steps using HTML & CSS

Text with Gradient Border using HTML & CSS

Login Signup Form Transition using HTML, CSS & JavaScript

A Flower Shower of Blessings using HTML, CSS & JavaScript

Water Waves using HTML, CSS & JavaScript

Flying Origami Bird using HTML & CSS

Glowing Meteor using HTML & CSS

Crafting a World Beyond The Sky using HTML & CSS

Floral Tribute to Flag using HTML, CSS & JavaScript

Tri Hexa Loader using HTML & CSS