SVG mosaic style comic

Question

SVG mosaic style comic

Navigation

#1 by (1 votes)

5

I'm developing a comics style layout and wanted help to create a svg.

In case the last comic is similar to the photo placed of DC commics.

Someone help me create this last part.

          .trapezio {  
  stroke:black;
  stroke-width:1;
  filter:url("#desaturate")
}

#trapezio1 {
  fill:url(#img1);        
}

#trapezio2 {
  fill:url(#img2);
}

.trapezio:hover  {
  filter: none;
  cursor: pointer;
}

<svg viewBox="0 0 455 350" >
  <polygon id="trapezio1" class="trapezio" points="  0,0 150,0 150,150   0,150" />
  <polygon id="trapezio2" class="trapezio" points="155,0 320,0 278,150 155,150" /> 
  <polygon id="trapezio2" class="trapezio" points="325,0 455,0 455,180 275,180" />
  <polygon id="trapezio1" class="trapezio" points="0,155 190,155 190,280   0,280" />    
  <polygon id="trapezio1" class="trapezio" points="235 ,155 195,155 195,280   235 ,  280 " />       
  <defs>
    <pattern id="img1" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-shanghai-most-beautiful-parks.jpg" 
             width="250" height="250" />
    </pattern>
    <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
      <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
         <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
      <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
  </defs>
  <filter id="desaturate">
    <feColorMatrix type="matrix" 
                   values="0.3333 0.3333 0.3333 0 0
                           0.3333 0.3333 0.3333 0 0
                           0.3333 0.3333 0.3333 0 0
                           0      0      0      1 0"/>
  </filter>
</svg>

html css svg

asked by anonymous 01.08.2016 / 17:52

1 answer

Xamarin - SQLite Join Convert String from a JTextField to Calendar

score 1 · Accepted Answer

The space left over did not help much, but would it be something like that?

.trapezio {  
  stroke:black;
  stroke-width:1;
  filter:url("#desaturate")
}

#trapezio1 {
  fill:url(#img1);        
}

#trapezio2 {
  fill:url(#img2);
}

.trapezio:hover  {
  filter: none;
  cursor: pointer;
}

<svg viewBox="0 0 455 350" >
  <polygon id="trapezio1" class="trapezio" points="  0,0 150,0 150,150   0,150" />
  <polygon id="trapezio2" class="trapezio" points="155,0 320,0 278,150 155,150" /> 
  <polygon id="trapezio2" class="trapezio" points="325,0 455,0 455,180 275,180" />
  <polygon id="trapezio1" class="trapezio" points="0,155 190,155 190,280   0,280" />    
  <polygon id="trapezio1" class="trapezio" points="235 ,155 195,155 195,280   235 ,  280 " />   
  <polygon id="trapezio1"  class="trapezio" points="251 155,275 155,267 185,455 185,455 280,240 279,240 175"/>
  <defs>
    <pattern id="img1" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-shanghai-most-beautiful-parks.jpg" 
             width="250" height="250" />
    </pattern>
    <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
      <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
         <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
      <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
     <pattern id="img2" width="1" height="1">
      <image xlink:href="http://crossorigin.me/http://www.travelandleisure.com/sites/default/files/field/image/local-experts-bangkok-best-beaches.jpg" 
             width="250" height="250"/>
    </pattern>
  </defs>
  <filter id="desaturate">
    <feColorMatrix type="matrix" 
                   values="0.3333 0.3333 0.3333 0 0
                           0.3333 0.3333 0.3333 0 0
                           0.3333 0.3333 0.3333 0 0
                           0      0      0      1 0"/>
  </filter>
</svg>

I also leave this site here to generate SVG forms. Clip Path Generator