Chrome Logo From HTML

Ticker

10/recent/ticker-posts

Chrome Logo From HTML

AK Creative 11/17/2020 03:25:00 PM

Create Fantastic Logo from HTML

🔄


<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Google Chrome</title>

        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

        <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>

            body{


                font-family: 'Open Sans', sans-serif;

                background-color: rgb(82, 245, 204);


            }


            #mySection{


                position: relative;

                width: 100%;

                margin: auto;


            }


            #mySVG{


                position: relative;

                margin: auto;

                left: calc(50% - 190px);


            }


            #helpText, #textGroup{


                pointer-events: none;

                -webkit-user-select: none;

                -moz-user-select: none;

                -ms-user-select: none;

                user-select: none;


            }


            #footer{


                position: fixed;

                width: 100%;

                bottom:0px;

                right: -0px;

                height: 50px;

                background-color: rgb(8, 204, 155);

                box-sizing: border-box;

                border-top: 5px solid rgb(245, 10, 10);


            }


            #profilePic{


                position: absolute;

                top: 10px;

                width: 30px;

                height: 30px;

                border-radius: 50%;

                left: calc(25% - 20px);


            }


            #theImg{


                border-radius: 50%;

                max-width: 30px;


            }


            #sig{


                position: absolute;

                left: calc(25% + 20px);

                font-size: 13px;

                letter-spacing: 0.75px;

                top: calc(50% - 20px);


            }

        </style>

    </head>

    <body>

        <section id="mySection">

            <svg id="mySVG" width="380" height="210">

                <g id="textGroup">

                    <text x="150" y="100" opacity="0" text-anchor="middle" dominant-baseline="middle" font-size="60" font-weight="600" fill="#77787A">chrome      

                        <animate attributeName="opacity" values="0;1" begin="chromeAni.end-1s" dur="1s" fill="freeze"/>

                    </text>

                    <animateTransform attributeName="transform" type="translate" values="0 0;120 0;" begin="chromeAni.end-1s" dur="1s" fill="freeze">

                </g>

                <g id="mainGroup" onclick="startAnimation">

                    <path id="yellowSection" class="section" fill="#FFD200"/>

                    <path id="greenSection" class="section" fill="#4AB646"/>

                    <path id="redSection" class="section" fill="#E95145"/>

                    <circle id="centerCricleOuter" cx="190" cy="100" r="30" fill="#F1F1F1"/>

                    <circle id="centerCricle" cx="190" cy="100" r="24" fill="#2F8BDD"/>

                    <circle id="cover" cx="190" cy="100" r="70" fill="rgba(0,0,0,0)"></circle>

                    <animateTransform id="chromeAni2" attributeName="transform" type="translate" values="0 0;0 0; -110 0;" dur="4" fill="freeze" begin="indefinite"/>

                    <animateTransform id="chromeAni" attributeName="transform" type="rotate" values="0 190 100;1080 190 100;2520 190 100;3600 190 100;" dur="4" fill="freeze" additive="sum" begin="indefinite"/>     

                </g>

                

                <text id="helpText" x="180" y="190" text-anchor="middle" dominant-baseline="middle" font-size="16" fill="red">Click the Logo above to start the animation!</text>

            </svg>

        </section>

        <div id="footer">

            <div id="profilePic">

                <a href="https://www.sololearn.com/Profile/100073">

            </div>

            <div id="sig">

        </div>

        <script>


            var section = document.getElementsByClassName("section");

            var mainGroup = document.getElementById("mainGroup");

            var helpText = document.getElementById("helpText");

            mainGroup.addEventListener("click",startAnimation,false);


            var result;

            var smallR = 30;

            var bigR = 70;

            var x = 380;

            var y = 200;

            var angle = 120;


            for(let i=0; i<section.length; i++){


                result = "";


                result += "M"+((x/2)+(smallR*Math.cos((-90+(i*angle))*Math.PI/180)))+","+((y/2)+(smallR*Math.sin((-90+(i*angle))*Math.PI/180)))+" ";

                result += "L"+((x/2)+(bigR*Math.cos((-25+(i*angle))*Math.PI/180)))+","+((y/2)+(bigR*Math.sin((-25+(i*angle))*Math.PI/180)))+" ";

                result += "A70 70 0 0 1 "+((x/2)+(bigR*Math.cos((95+(i*angle))*Math.PI/180)))+" "+((y/2)+(bigR*Math.sin((95+(i*angle))*Math.PI/180)))+" ";

                result += "L"+((x/2)+(smallR*Math.cos((50+(angle*i))*Math.PI/180)))+","+((y/2)+(smallR*Math.sin((50+(angle*i))*Math.PI/180)))+" Z";


                section[i].setAttribute("d",""+result);

            

            }


            function startAnimation(event){


                document.getElementById("chromeAni").beginElement();

                document.getElementById("chromeAni2").beginElement();


                mainGroup.removeEventListener("click",startAnimation,false); 

                helpText.style.display = "none";             


            }

        

        </script>

    </body>

</html> 


OUTPUT





Post a Comment

51 Comments

  1. Unique KnowNovember 17, 2020 at 3:28 PM

    Wowwww 🗣️🗣️🗣️🗣️

    ReplyDelete
  2. Jaunpur GPNovember 17, 2020 at 3:31 PM

    brilliant

    ReplyDelete
  3. WonderingNovember 17, 2020 at 3:37 PM

    awsm

    ReplyDelete
  4. Excellent workNovember 17, 2020 at 3:38 PM

    effective

    ReplyDelete
  5. AwesomeNovember 17, 2020 at 3:39 PM

    great

    ReplyDelete
  6. Rock_ArviNovember 17, 2020 at 3:39 PM

    most important

    ReplyDelete
  7. A A ANovember 17, 2020 at 3:40 PM

    interesting

    ReplyDelete
  8. ArviNovember 17, 2020 at 3:41 PM

    very nice

    ReplyDelete
  9. ArviNovember 17, 2020 at 3:41 PM

    100%

    ReplyDelete
  10. UnknownNovember 17, 2020 at 3:42 PM

    very technical

    ReplyDelete
  11. FabulousNovember 17, 2020 at 3:43 PM

    supper

    ReplyDelete
  12. MLLNovember 17, 2020 at 3:44 PM

    superior

    ReplyDelete
  13. SuperNovember 17, 2020 at 3:45 PM

    superiority

    ReplyDelete
  14. UnknownNovember 17, 2020 at 4:06 PM

    ohhhmygodddd

    ReplyDelete
  15. UnknownNovember 17, 2020 at 4:06 PM

    ohhhmygodddd

    ReplyDelete
  16. UnknownNovember 17, 2020 at 4:07 PM

    ohhhmygoddddohhhmygodddd

    ReplyDelete
  17. UnknownNovember 17, 2020 at 4:07 PM

    wonderful

    ReplyDelete
  18. UnknownNovember 17, 2020 at 4:07 PM

    wonderful

    ReplyDelete
  19. UnknownNovember 17, 2020 at 4:08 PM

    wonderfulwonderful

    ReplyDelete
  20. UnknownNovember 17, 2020 at 4:09 PM

    great

    ReplyDelete
  21. UnknownNovember 17, 2020 at 4:09 PM

    great

    ReplyDelete
  22. son aNovember 17, 2020 at 4:10 PM

    great

    ReplyDelete
  23. son aNovember 17, 2020 at 4:10 PM

    great

    ReplyDelete
  24. UnknownNovember 17, 2020 at 4:11 PM

    superbbbbbbb

    ReplyDelete
  25. UnknownNovember 17, 2020 at 4:11 PM

    superbbbbbbb

    ReplyDelete
  26. UnknownNovember 17, 2020 at 4:12 PM

    superbbbbbbb

    ReplyDelete
  27. UnknownNovember 17, 2020 at 4:12 PM

    superbbbbbbb

    ReplyDelete
  28. UnknownNovember 17, 2020 at 4:13 PM

    superbbbbbbb

    ReplyDelete
  29. UnknownNovember 17, 2020 at 4:13 PM

    good

    ReplyDelete
  30. Rinku rinku upadhyayNovember 17, 2020 at 4:51 PM

    Super👌👌👌👌👌

    ReplyDelete
  31. Rinku rinku upadhyayNovember 17, 2020 at 4:51 PM

    🙌🙌🙌🙌🙌🙌

    ReplyDelete
  32. Rinku rinku upadhyayNovember 17, 2020 at 4:52 PM

    Great

    ReplyDelete
  33. Rinku rinku upadhyayNovember 17, 2020 at 4:52 PM

    Great

    ReplyDelete
  34. MaaNovember 17, 2020 at 4:58 PM

    good

    ReplyDelete
  35. Arjun panditNovember 17, 2020 at 5:08 PM

    🥇👌

    ReplyDelete
  36. Arjun panditNovember 17, 2020 at 5:10 PM

    🥇👌

    ReplyDelete
  37. UnknownNovember 17, 2020 at 5:37 PM

    very nice

    ReplyDelete
  38. AshishNovember 18, 2020 at 9:33 AM

    Very good

    ReplyDelete
  39. AshishNovember 18, 2020 at 9:33 AM

    Very good

    ReplyDelete
  40. Computer worldNovember 19, 2020 at 9:32 PM

    👌🏻👌🏻👌🏻👌🏻👌🏻Good work 👌🏻👌🏻👌🏻👌🏻👌🏻with 👌🏻👌🏻👌🏻👌🏻👌🏻 Programming

    ReplyDelete
  41. AnonymousNovember 20, 2020 at 8:25 PM

    Excellent 😘😘😘

    ReplyDelete
  42. AnonymousNovember 20, 2020 at 8:26 PM

    I love it😘😘😘

    ReplyDelete
  43. SonaNovember 21, 2020 at 3:33 PM

    Good😎😎

    ReplyDelete
  44. UnknownNovember 22, 2020 at 6:27 AM

    Great 👌👌👌👌 done

    ReplyDelete
  45. UnknownNovember 23, 2020 at 4:42 PM

    Kallu excellent

    ReplyDelete
  46. santosh prajapatiNovember 23, 2020 at 5:07 PM

    fantastic

    ReplyDelete
  47. santosh prajapatiNovember 23, 2020 at 5:07 PM

    fantastic

    ReplyDelete
  48. UnknownNovember 23, 2020 at 5:11 PM

    excellent

    ReplyDelete
  49. AshishNovember 24, 2020 at 8:43 AM

    Wonderful

    ReplyDelete
  50. ArzuNovember 24, 2020 at 5:40 PM

    decently

    ReplyDelete
  51. UnknownDecember 5, 2020 at 7:19 PM

    Kallu
    Good

    ReplyDelete