How do I add a Google One style multi-color border to a circular image?

Question

I am creating a website for the Google DSC club at my University, and I wanted to add a Google One style border to the circular portfolio images on the site.

I was wondering how to accomplish this using CSS, but pre-rendered Photoshop or Illustrator tricks would also do.

I tried to modify some the code as given in this answer, but I wasn't able to achieve the perfect effect.

.test {
  margin: 25px 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 12px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, #ea4335 36%, #4285f4 30%),
                    linear-gradient(120deg, #4285f4 36%, #34a853 30%),
                    linear-gradient(300deg, #fbbc04 36%, #ea4335 30%),
                    linear-gradient(210deg, #34a853 36%, #fbbc04 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  transform: rotate(90deg);
}

<div class="test"></div>

As you can see, the border colors are not aligned correctly.

Is there any way to accomplish this using an easier method?

Thank you!

What do you mean they don't align correctly? Can you show a picture? look good from the snippet — Waldir Bolanos, Jul 01 '19 at 16:50
Hey Waldir, by not aligning correctly, I mean as in the original Google One border that I've linked in the post. The colors of the border are aligned as seen in the Google 'G' logo. Red and blue are large, green is medium and yellow is the smallest. But anytime I try to change the angles or the length of the colors, it warps into a mess. I really don't want to be so specific but now that I've suggested it to the team, they want it like that. — VRG, Jul 01 '19 at 17:19
Something like this? https://jsfiddle.net/wwWaldi/n6dbycop/24/ — Waldir Bolanos, Jul 01 '19 at 17:31

Alexandr_TT · Accepted Answer · 2019-07-03T06:14:55.400

SVG option

To create multi-colored sectors of a circle, use stroke-dasharray

Calculation of lengths of lines and spaces:

For the radius R = 100px circumference = 2 * 3.1415 * 100 = 628.3 px

To get the line equal to one fourth of the circle, we calculate the attributes stroke-dasharray

628.3 / 4 = 157.075 Space will be 3/4 of the circle length = 471px

But since the length of the blue, red and green sectors is a little more than a quarter of a circle, we add this difference. stroke-dasharray = "183.255 445.045"

stroke-dashoffset = "78.54" shifts the beginning of the sector by 1/8 of the circumference

Example for one sector

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="250" height="250" viewBox="0 0 250 250" > 
   
<circle cx="125" cy="125" r="100" fill="none" stroke="#d3d3d3" stroke-width="8" />   
    
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 
 
 </svg>

And also we set attributes for other color sectors.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="250" height="250" viewBox="0 0 250 250" >  

   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.255 425.045" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="78.54 549.76" stroke-dashoffset="340 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="525.225 " /> 
 
 </svg>

Add an image and cut it using a mask to fit the circles

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="40%" height="40%" viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image xlink:href="https://i.stack.imgur.com/UsGg5.jpg" x="0" y="23" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
 </svg>

The solution is adaptive and works the same in all modern browsers, including IE11,Edge

UPDATE

OP did not ask, but perhaps this supplement will be useful to him or someone else.

SVG+CSS animation

To spice up your application I add animation options.

#1. Animation of rotation of the stroke around the image

Wrap all the circles that form a multicolored line with the group tag <g>
fill ="none" replace with fill ="transparent" for the animation to work when you hover over the whole circle

.student {
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#gr1 {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#gr1:hover {
  -webkit-transform: rotate(720deg);
          transform: rotate(720deg);
}

<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" /> 

<g id="gr1"> 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 </g>
 </svg> 
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
<g id="gr1">   
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
</g> 
 </svg>  
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
<g id="gr1">  
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
</g> 
   </svg>  
  </div> 
 </div>

2.# Animation of image rotation when hovering

CSS rules are used to implement rotation of images

#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.student {

background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
 </svg> 
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
 </svg>  
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
   </svg>  
  </div> 
 </div>

@Alexandr_TT Can you please check this question https://stackoverflow.com/q/66025363/9004424 — Husna, Feb 06 '21 at 07:47
@Husna I looked at your competitive question. Do you want me to try to answer your question? — Alexandr_TT, Feb 06 '21 at 08:01
@Alexandr_TT Yeah I want you to try. because I posted my question a few days ago but i didn't get any answer. — Husna, Feb 06 '21 at 08:05
@Husna Ok I will try, If you liked this answer of mine it would be good to mark it upwote — Alexandr_TT, Feb 06 '21 at 08:21

score 1 · Answer 2 · answered Jul 03 '19 at 13:20

tiny svg solution with masks

<svg viewbox="-5 -5 10 10" height="90vh">
  <defs>
    <mask id="mask1">
      <circle r="4.5" stroke="white" fill="black" stroke-width="0.5"></circle> 
    </mask>
    <mask id="mask2">
      <circle r="4"fill="white"></circle> 
    </mask>
  </defs>
  <g mask="url(#mask1)" transform="rotate(-45)">
    <rect width="7" height="7" fill="#fabb04" x="-7" y="-6"></rect>
    <rect width="7" height="7" fill="#34a852" x="-5" y="-1"></rect>
    <rect width="7" height="7" fill="#ea4335" x="-2" y="-5"></rect>
    <rect width="7" height="7" fill="#4285f4" x="0"  y="-1"></rect>
  </g>
  <image x="-4" y="-4" width="8" height="8" mask="url(#mask2)"
    xlink:href="https://i.stack.imgur.com/3q67w.gif"></image>
</svg>

How do I add a Google One style multi-color border to a circular image?

2 Answers2

SVG option

SVG+CSS animation