How do the Borders go?



  • How to implement the complex Borders, as in the figure below.

    введите сюда описание изображения

    Borders must have different widths of white rounds and be rotated.

    The internal border should cut the image by its size.



  • Well, if the Borders are needed, there must be a picture inside.

    Think about the SVG decision.
    The annex will be adaptive, cross-brauser for all modern browsers, including Edge MS and svg blocks wrapped by a container .container I'll be in the castle like a normal block.

    .container {
    width:50vw;
    height:50vh;
    }
    .crc {
    fill:none;
    stroke:#FCFFFF;
    stroke-width:10;
    }
    <div class="container">
    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 600 600" style="background:#F2F6F9" >  
         <defs>
             <!-- Маска -->
         <mask id="msk1" > 
                <rect  width="100%" height="100%"  fill="black" /> 
                   <circle cx="300" cy="300" stroke="red" stroke-width="1"  r="180" fill="white" /> 
         </mask> 
         </defs> 
                            <!-- Обрезка изображения маской -->
              <image xlink:href="https://i.stack.imgur.com/6kywq.png" x="-140" y="-60" mask="url(#msk1)" width="800" height="780" /> 
                    <!-- Белые круги           -->
               <circle class="crc" cx="300" cy="300" r="220"  />
                 <circle class="crc" cx="300" cy="300"  r="260"  />
    </svg>
    </div>   

    Opening animation, autopsy.

    The animation is based on a change in mask radius from zero to 180px

    <animate attributeName="r" begin="svg1.mouseenter"  dur="1s" values="0;180"
      restart="whenNotActive" fill="freeze"/> 
    

    .container {
    width:50vw;
    height:50vh;
    }
    .crc {
    fill:none;
    stroke:#FCFFFF;
    stroke-width:10;
    }
    <div class="container">
    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 600 600" style="background:#F2F6F9" >  
         <defs>
             <!-- Маска -->
         <mask id="msk1" > 
                <rect  width="100%" height="100%"  fill="black" /> 
                   <circle cx="300" cy="300" stroke="red" stroke-width="1"  r="0" fill="white" >
                      <animate attributeName="r" begin="svg1.mouseenter"  dur="1s" values="0;180" restart="whenNotActive" fill="freeze"/> 
                        <animate attributeName="r" begin="svg1.mouseleave"  dur="1s" values="180;0" restart="whenNotActive" fill="freeze"/>
                   </circle>               
         </mask> 
         </defs> 
    
          &lt;image xlink:href="https://i.stack.imgur.com/6kywq.png" x="-140" y="-60" mask="url(#msk1)" width="800" height="780" /&gt; 
                &lt;!-- Белые круги           --&gt;
           &lt;circle class="crc" cx="300" cy="300" r="220"  /&gt;
             &lt;circle class="crc" cx="300" cy="300"  r="260"  /&gt;
    

    </svg>
    </div>



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2