Trying to replicate this image:
How would I do this?
Would I be using something like this?
I’m confused how I would implement it.
column-count: 3;
column-gap: 4px;
column-rule-style: solid;
Wasn’t able to get it.
.window {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
width: 150px;
height: 150px;
border-radius: 50%;
border: 1px solid green;
}
span {
font-size: 12px;
color: red;
}
<div class="window">
<span>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg> <br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg> <br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</span>
</div>
SamA74
July 14, 2020, 8:39pm
2
Look carefully at the example image. The objects are not actually aligned into rows and columns.would advocate the use of absolute positioning.
OT Tip: You don’t have to define the SVG code several times to create multiple instances of the same shape.
2 Likes
I almost got it here but now it looks crooked.
.window {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
width: 150px;
height: 150px;
border-radius: 50%;
border: 1px solid green;
column-gap: 30px;
}
span {
font-size: 12px;
color: red;
}
<div class="window">
<span>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</span>
<span>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</span>
<span>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</span>
</div>
What do you mean by that, can you provide an example?
SamA74
July 14, 2020, 8:54pm
5
This is a pen created for another topic, but the principles are the same.
There is an svg element at the top with a defs section where I define a circle, and give its layer (g) an ID. It is only a simple circle, but could have been a more complex SVG image.
Then in the actual content, wherever I want to put that same svg object, I just link to its ID with:-
<use xlink:href="#icon-circle"></use>
…which cuts a lot of clutter and repetition from the page.
4 Likes
I managed to figure out absolute.
.window {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 1px solid green;
}
.d1 {
position: absolute;
top: 30px;
left: 30px;
bottom: 100px;
right: 0;
}
.d2 {
position: absolute;
top: 64px;
left: 10px;
bottom: 0;
right: 0;
}
.d3 {
position: absolute;
top: 5;
left: 30px;
bottom: 30px;
right: 0;
}
.middle {
position: absolute;
top: 6px;
left: 65px;
bottom: 0;
right: 0;
}
.d4 {
position: absolute;
top: 30px;
left: 100px;
bottom: 100px;
right: 0;
}
.d5 {
position: absolute;
top: 64px;
left: 120px;
bottom: 0;
right: 0;
}
.d6 {
position: absolute;
top: 5;
left: 100px;
bottom: 30px;
right: 0;
}
<div class="window">
<span>
<svg class="d1" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg class="d2" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg class="d3" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
</span>
<span class="middle">
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg> <br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg> <br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</span>
<span>
<svg class="d4" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg class="d5" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<br>
<svg class="d6" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</span>
</div>
Hi there asasass,
you may find this example…
https://codepen.io/coothead/full/RwrYLya
… a little less complex.
Here is it’s code…
https://codepen.io/coothead/pen/RwrYLya
coothead
2 Likes
Hi there asasass,
here is another example…
https://codepen.io/coothead/full/ZEQMaaz
…that uses your <path>'s, which I wasmy <image> in the <pattern>
Here is the code…
https://codepen.io/coothead/pen/ZEQMaaz
coothead
6 Likes
What if I used different svg’s and added text to it?
How would I be able to improve the code?
.window {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
width: 150px;
height: 150px;
border-radius: 50%;
background: black;
}
span {
font-size: 18px;
color: #355C96;
margin-left: 15px;
}
.img1 {
position: absolute;
left: 80px;
top: 17px;
bottom: 0;
right: 0;
}
.img2 {
position: absolute;
left: 90px;
top: 39px;
bottom: 0;
right: 0;
}
.img3 {
position: absolute;
left: 81px;
top: 61px;
bottom: 0;
right: 0;
}
.img4 {
position: absolute;
left: 113px;
top: 80px;
bottom: 0;
right: 0;
}
.img5 {
position: absolute;
left: 85px;
top: 102px;
bottom: 0;
right: 0;
}
.img6 {
position: absolute;
left: 80px;
top: 131px;
bottom: 0;
right: 0;
}
.diamond1 {
position: absolute;
left: 22px;
top: 40px;
bottom: 0;
right: 0;
}
.diamond2 {
position: absolute;
left: 15px;
top: 70px;
bottom: 0;
right: 0;
}
.diamond3 {
position: absolute;
left: 22px;
top: 101px;
bottom: 0;
right: 0;
}
.text {
position: absolute;
left: 90px;
top: 62px;
bottom: 0;
right: 0;
font-size: 14px;
color: #FCDFFF;
}
<div class="window">
<span>asdfghjk <br>asdfgh<br>asdf <br> asdfghjkl<br> asdfghjklzx <br> asdfghjkl</span>
<span class="text">((asd)) </span>
<svg class="img1" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BB1A34" d="M21.828 20.559C19.707 21.266 19 17.731 19 17.731s.965-.968.235-1.829c1.138-1.137.473-1.707.473-1.707-1.954-1.953-5.119-1.953-7.071 0-.246.246-.414.467-.553.678-.061.086-.115.174-.17.262l-.014.027c-.285.475-.491.982-.605 1.509-.156.319-.379.659-.779 1.06-1.414 1.414-4.949-.707-7.778 2.121-.029.029-.045.069-.069.104-.094.084-.193.158-.284.25-3.319 3.319-3.003 9.018.708 12.728 3.524 3.525 8.84 3.979 12.209 1.17.058-.031.117-.061.165-.109.071-.072.126-.14.193-.21.053-.049.109-.093.161-.143 1.693-1.694 2.342-3.73 2.086-5.811-.068-.99-.165-1.766.39-2.321.707-.707 2.828 0 4.242-1.414 2.117-2.122.631-3.983-.711-3.537z" />
<path fill="#292F33" d="M14.987 18.91L30.326 3.572l2.121 2.122-15.339 15.339z" />
<path fill="#F5F8FA" d="M10.001 29.134c1.782 1.277 1.959 3.473 1.859 4.751-.042.528.519.898.979.637 2.563-1.456 4.602-3.789 4.038-7.853-.111-.735.111-2.117 2.272-2.406 2.161-.29 2.941-1.099 3.208-1.485.153-.221.29-.832-.312-.854-.601-.022-2.094.446-3.431-1.136-1.337-1.582-1.559-2.228-1.604-2.473-.045-.245-1.409-3.694-2.525-1.864-.927 1.521-1.958 4.509-5.287 5.287-1.355.316-3.069 1.005-3.564 1.96-.832 1.604.46 2.725 1.574 3.483 1.115.757 2.793 1.953 2.793 1.953z" />
<path fill="#292F33" d="M13.072 19.412l1.414-1.415 3.536 3.535-1.414 1.414zm-4.475 4.474l1.415-1.414 3.535 3.535-1.414 1.414z" />
<path fill="#CCD6DD" d="M7.396 27.189L29.198 5.427l.53.531L7.927 27.72zm.869.868L30.067 6.296l.53.531L8.796 28.59z" />
<path fill="#292F33" d="M9.815 28.325c.389.389.389 1.025 0 1.414s-1.025.389-1.414 0l-2.122-2.121c-.389-.389-.389-1.025 0-1.414h.001c.389-.389 1.025-.389 1.414 0l2.121 2.121z" />
<circle fill="#292F33" cx="13.028" cy="29.556" r="1" />
<path fill="#292F33" d="M14.445 31.881c0 .379-.307.686-.686.686-.379 0-.686-.307-.686-.686 0-.379.307-.686.686-.686.379 0 .686.307.686.686z" />
<path fill="#BB1A34" d="M35.088 4.54c.415.415.415 1.095-.001 1.51l-4.362 3.02c-.416.415-1.095.415-1.51 0L26.95 6.804c-.415-.415-.415-1.095.001-1.51l3.02-4.361c.416-.415 1.095-.415 1.51 0l3.607 3.607z" />
<circle fill="#66757F" cx="32.123" cy="9.402" r=".625" />
<circle fill="#66757F" cx="33.381" cy="8.557" r=".625" />
<circle fill="#66757F" cx="34.64" cy="7.712" r=".625" />
<circle fill="#66757F" cx="26.712" cy="3.811" r=".625" />
<circle fill="#66757F" cx="27.555" cy="2.571" r=".625" />
<circle fill="#66757F" cx="28.398" cy="1.332" r=".625" /></svg>
<svg class="img2" width="20px" viewBox="0 0 36 36"><path fill="#DD2E44" d="M24 7c-3 0-3 1-6 1s-3-1-6-1c-4 0-9 2-9 9 0 11 6 20 10 20 3 0 3-1 5-1s2 1 5 1c4 0 10-9 10-20 0-7.001-5-9-9-9z"/><path fill="#77B255" d="M19 7s3-4 8-4c4 0 6 2 6 2s-4 3-7 3-7-1-7-1z"/><path fill="#662113" d="M18 10c-.552 0-1-.448-1-1 0-3.441 1.2-6.615 3.293-8.707.391-.391 1.023-.391 1.414 0s.391 1.024 0 1.414C19.986 3.427 19 6.085 19 9c0 .552-.448 1-1 1z"/></svg>
<svg class="img3" width="20px" viewBox="0 0 36 36">
<path fill="#F4900C" d="M35 19c0-2.062-.367-4.039-1.04-5.868-.46 5.389-3.333 8.157-6.335 6.868-2.812-1.208-.917-5.917-.777-8.164.236-3.809-.012-8.169-6.931-11.794 2.875 5.5.333 8.917-2.333 9.125-2.958.231-5.667-2.542-4.667-7.042-3.238 2.386-3.332 6.402-2.333 9 1.042 2.708-.042 4.958-2.583 5.208-2.84.28-4.418-3.041-2.963-8.333C2.52 10.965 1 14.805 1 19c0 9.389 7.611 17 17 17s17-7.611 17-17z" />
<path fill="#FFCC4D" d="M28.394 23.999c.148 3.084-2.561 4.293-4.019 3.709-2.106-.843-1.541-2.291-2.083-5.291s-2.625-5.083-5.708-6c2.25 6.333-1.247 8.667-3.08 9.084-1.872.426-3.753-.001-3.968-4.007C7.352 23.668 6 26.676 6 30c0 .368.023.73.055 1.09C9.125 34.124 13.342 36 18 36s8.875-1.876 11.945-4.91c.032-.36.055-.722.055-1.09 0-2.187-.584-4.236-1.606-6.001z" /></svg>
<svg class="img4" width="20px" viewBox="0 0 36 36">
<path fill="#FFAC33" d="M5.123 5h6C12.227 5 13 4.896 13 6V4c0-1.104-.773-2-1.877-2h-8c-2 0-3.583 2.125-3 5 0 0 1.791 9.375 1.917 9.958C2.373 18.5 4.164 20 6.081 20h6.958c1.105 0-.039-1.896-.039-3v-2c0 1.104-.773 2-1.877 2h-4c-1.104 0-1.833-1.042-2-2S3.539 7.667 3.539 7.667C3.206 5.75 4.018 5 5.123 5zm25.812 0h-6C23.831 5 22 4.896 22 6V4c0-1.104 1.831-2 2.935-2h8c2 0 3.584 2.125 3 5 0 0-1.633 9.419-1.771 10-.354 1.5-2.042 3-4 3h-7.146C21.914 20 22 18.104 22 17v-2c0 1.104 1.831 2 2.935 2h4c1.104 0 1.834-1.042 2-2s1.584-7.333 1.584-7.333C32.851 5.75 32.04 5 30.935 5zM20.832 22c0-6.958-2.709 0-2.709 0s-3-6.958-3 0-3.291 10-3.291 10h12.292c-.001 0-3.292-3.042-3.292-10z" />
<path fill="#FFCC4D" d="M29.123 6.577c0 6.775-6.77 18.192-11 18.192-4.231 0-11-11.417-11-18.192 0-5.195 1-6.319 3-6.319 1.374 0 6.025-.027 8-.027l7-.001c2.917-.001 4 .684 4 6.347z" />
<path fill="#C1694F" d="M27 33c0 1.104.227 2-.877 2h-16C9.018 35 9 34.104 9 33v-1c0-1.104 1.164-2 2.206-2h13.917c1.042 0 1.877.896 1.877 2v1z" />
<path fill="#C1694F" d="M29 34.625c0 .76.165 1.375-1.252 1.375H8.498C7.206 36 7 35.385 7 34.625v-.25C7 33.615 7.738 33 8.498 33h19.25c.759 0 1.252.615 1.252 1.375v.25z" /></svg>
<svg class="img5" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M35 12c0-3.866-3.134-7-7-7-1.167 0-2.265.29-3.232.794-2.082-2.827-5.425-4.669-9.205-4.669-5.132 0-9.475 3.38-10.923 8.036C1.982 9.778 0 12.155 0 15c0 2.979 2.174 5.445 5.021 5.913C5.237 24.862 8.498 28 12.5 28c2.176 0 4.13-.933 5.5-2.413C19.37 27.067 21.323 28 23.5 28c4.143 0 7.5-3.357 7.5-7.5 0-.71-.105-1.394-.289-2.045C33.23 17.396 35 14.905 35 12z" />
<circle fill="#BDDDF4" cx="4" cy="31" r="3" /></svg>
<svg class="img6" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BB1A34" d="M1.728 21c-.617 0-.953-.256-1.127-.471-.171-.211-.348-.585-.225-1.165L3.104 6.658l-1.714.097h-.013c-.517 0-.892-.168-1.127-.459-.22-.272-.299-.621-.221-.98.15-.702.883-1.286 1.667-1.329l4.008-.227c.078-.005.15-.008.217-.008.147 0 .536 0 .783.306.252.312.167.709.139.839L3.719 19.454c-.187.884-.919 1.489-1.866 1.542L1.728 21zm10.743-2c-1.439 0-2.635-.539-3.459-1.559-1.163-1.439-1.467-3.651-.878-6.397 1.032-4.812 4.208-8.186 7.902-8.395 1.59-.089 2.906.452 3.793 1.549 1.163 1.439 1.467 3.651.878 6.397-1.032 4.81-4.208 8.184-7.904 8.394-.112.008-.223.011-.332.011zm3.414-13.746l-.137.004c-1.94.111-3.555 2.304-4.32 5.866-.478 2.228-.381 3.899.272 4.707.297.368.717.555 1.249.555l.14-.004c1.94-.109 3.554-2.301 4.318-5.864.478-2.228.382-3.9-.27-4.708-.296-.369-.718-.556-1.252-.556zm11.591 12.107c-1.439 0-2.637-.539-3.462-1.56-1.163-1.439-1.467-3.651-.878-6.397 1.033-4.813 4.209-8.186 7.903-8.394 1.603-.09 2.903.453 3.79 1.549 1.163 1.439 1.467 3.651.878 6.396-1.031 4.809-4.206 8.183-7.902 8.396-.112.008-.221.01-.329.01zm3.411-13.747l-.136.004c-1.941.111-3.556 2.304-4.32 5.865-.478 2.229-.381 3.901.272 4.708.297.368.719.555 1.251.555l.14-.004c1.939-.109 3.554-2.302 4.318-5.864.479-2.227.383-3.899-.27-4.707-.298-.37-.72-.557-1.255-.557zM11 35.001c-.81 0-1.572-.496-1.873-1.299-.388-1.034.136-2.187 1.17-2.575.337-.126 8.399-3.108 20.536-4.12 1.101-.096 2.067.727 2.159 1.827.092 1.101-.727 2.067-1.827 2.159-11.59.966-19.386 3.851-19.464 3.88-.23.086-.468.128-.701.128zM2.001 29c-.804 0-1.563-.488-1.868-1.283-.396-1.031.118-2.188 1.149-2.583.542-.209 13.516-5.126 32.612-6.131 1.113-.069 2.045.789 2.103 1.892.059 1.103-.789 2.045-1.892 2.103-18.423.97-31.261 5.821-31.389 5.87-.235.089-.477.132-.715.132z" /></svg>
<svg class="diamond1" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="diamond2" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="diamond3" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</div>
system
October 16, 2020, 1:18pm
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
