DEV Community

Cover image for google logo with just html & css

google logo with just html & css

rs9110 on September 20, 2020

So, here's how to create the Google logo with just HTML and CSS. First, place a div in your html with an id of google. <div id="google">&...
Collapse
 
link2twenty profile image
Andrew Bone

A little tip for future posts, you can embed a demo of your code by writing it somewhere like JSFiddle and then embedding it like so

{% jsfiddle https://jsfiddle.net/link2twenty/bxL16fum/ result css html %}

Collapse
 
srezas profile image
SeyedReza SeyedMohseni

may you please also implement its animation?

Collapse
 
rkdme profile image
Rafal Kolodziej

interesting approach.

btw. there is missing colon in margin 10vh auto 0; for #google rule

Collapse
 
rs9110 profile image
rs9110

ah yes, thanks for pointing that out.

Collapse
 
olalani profile image
Olalani Oluwaseun

Have tried it out ☺️ viewing G but not animating like your post gif

Collapse
 
srezas profile image
SeyedReza SeyedMohseni

click bate :))

Collapse
 
olalani profile image
Olalani Oluwaseun

How ???

Collapse
 
ashraful profile image
Mohamad Ashraful Islam

That's creative

Collapse
 
ashishmohanty profile image
Ashish Mohanty

Thanks alot

Collapse
 
srezas profile image
SeyedReza SeyedMohseni

nice. this page on Instagram should mention your article
dev.to/rs9110/google-logo-with-jus...

Collapse
 
kpeale profile image
Kpeale Legbara

I am going to try this out🔥🔥

Collapse
 
robertkameni profile image
Robert Kameni

Magnifique 🔥🔥🔥

Collapse
 
mathiasfx profile image
Mathias Pereira

amazing

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Looks quite different to the real logo. Needs some work

Collapse
 
link2twenty profile image
Andrew Bone

If you want it to be exact you'll have to do something like:

<svg height="500px" width="500px" viewBox="0 0 533.5 544.3" xmlns="http://www.w3.org/2000/svg">
  <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4" />
  <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853" />
  <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04" />
  <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335" />
</svg>

I think Rosis did a good job considering he was just using borders and pseudo elements.