<header>
<h1>Forked: CSS Grid and Shape-Outside Venn Diagram</h1>
<p>Original blog post on this: <a href="http://adrianroselli.com/2018/12/a-css-venn-diagram.html">A CSS Venn Diagram</a></p>
<p>CSS Tricks: <a href="https://css-tricks.com/using-css-to-set-text-inside-a-circle/#comment-1756484" target="_blank">shape-outside, text inside a circle article</a></p>
</header>
<main>
<article class="Venn">
<h2>Stock Model</h2>
<div class="circle one">
<span></span>
<span></span>
<h3>01</h3>
<p>A Venn diagram (also called primary diagram, set diagram or logic diagram) is a diagram that shows all possible logical relations between a finite collection of different sets. These diagrams depict elements as points in the plane, and sets as regions inside closed curves.
</p>
</div>
<div class="circle two">
<span></span>
<span></span>
<h3>02</h3>
<p>A Venn diagram consists of multiple overlapping closed curves, usually circles, each representing a set. The points inside a curve labelled S represent elements of the set S, while points outside the boundary represent elements not in the set S. This lends to easily read visualizations; for example, the set of all elements</p>
</div>
<div class="circle three">
<span></span>
<span></span>
<h3>03</h3>
<p>That are members of both sets S and T, S ∩ T, is represented visually by the area of overlap of the regions S and T. In Venn diagrams the curves are overlapped in every possible way, showing all possible relations between the sets. They are thus a special case of Euler diagrams.</p>
</div>
<div class="shape onetwo">
<span></span>
<span></span>
<h3>One + Two</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis
ligula, a vulputate nibh porttitor eu. Morbi tempus dolor sed lectus gravida, id convallis ipsum convallis. Cras nec pharetra est, nec finibus lectus. Donec pulvinar ipsum arcu, sit amet pulvinar augue luctus quis.
</p>
</div>
<div class="shape onethree">
<span></span>
<span></span>
<h3>One + Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis.
</p>
</div>
<div class="shape twothree">
<span></span>
<span></span>
<h3>Two + Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis.
</p>
</div>
<div class="shape onetwothree">
<span></span>
<span></span>
<h3>One + Two + Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis.
</p>
</div>
</article>
<article class="Venn guides">
<h2>Showing Boxes</h2>
<div class="circle one">
<span></span>
<span></span>
<h3>One</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis
ligula, a vulputate nibh porttitor eu. Morbi tempus dolor sed lectus gravida, id convallis ipsum convallis. Cras nec pharetra est, nec finibus lectus. Donec pulvinar ipsum arcu, sit amet pulvinar augue luctus quis.
</p>
</div>
<div class="circle two">
<span></span>
<span></span>
<h3>Two</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis
ligula, a vulputate nibh porttitor eu. Morbi tempus dolor sed lectus gravida, id convallis ipsum convallis. Cras nec pharetra est, nec finibus lectus. Donec pulvinar ipsum arcu, sit amet pulvinar augue luctus quis.
</p>
</div>
<div class="circle three">
<span></span>
<span></span>
<h3>Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis
ligula, a vulputate nibh porttitor eu. Morbi tempus dolor sed lectus gravida, id convallis ipsum convallis. Cras nec pharetra est, nec finibus lectus. Donec pulvinar ipsum arcu, sit amet pulvinar augue luctus quis.
</p>
</div>
<div class="shape onetwo">
<span></span>
<span></span>
<h3>One + Two</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis
ligula, a vulputate nibh porttitor eu. Morbi tempus dolor sed lectus gravida, id convallis ipsum convallis. Cras nec pharetra est, nec finibus lectus. Donec pulvinar ipsum arcu, sit amet pulvinar augue luctus quis.
</p>
</div>
<div class="shape onethree">
<span></span>
<span></span>
<h3>One + Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis.
</p>
</div>
<div class="shape twothree">
<span></span>
<span></span>
<h3>Two + Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis.
</p>
</div>
<div class="shape onetwothree">
<span></span>
<span></span>
<h3>One + Two + Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis magna erat, eget condimentum metus faucibus eget. Sed venenatis sem dui, quis faucibus nibh pretium a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada mattis.
</p>
</div>
</article>
</main>@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@200;400;700&family=Titillium+Web:ital,wght@0,200;0,400;0,700;1,200&display=swap');
body {
margin: 0;
font-family: 'Titillium Web', sans-serif;
}
header {
text-align: center;
padding: 4vmin;
background: #454545;
color: #fff;
}
h1 {
font-size: 3vw;
margin: 0;
}
h2 {
text-align: center;
font-size: 2.5vw;
}
p a {
color: #fff;
}
/*---BG COLOURS---*/
.circle {
mix-blend-mode: color-burn;
}
.circle, .shape {
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.circle.one {
background: rgba(142,201,212,.95);
}
.circle.two {
background: rgba(204,46,120,.95);
}
.circle.three {
background: rgba(234,180,63,.95);
}
/*---ORIGINAL PEN CSS---*/
main {
/* outline: 1px dotted #ccc; */
width: calc(100% * var(--venn-width-mult));
margin: 0 auto;
}
:root {
--venn-width-mult: 0.9;
}
@media print {
:root {
--venn-width-mult: 1;
}
}
/* Defaults for browsers that do not support shape-outside */
@media (min-width: 800px) {
.Venn::after {
content: "";
display: block;
width: 1px;
height: 1px;
clear: both;
}
.circle,
.shape {
box-sizing: border-box;
/*border: 0.1em solid rgba(0, 0, 0, 0.5);*/
margin: 0 0.75%;
padding: 0 1.5em;
float: left;
width: 32%;
}
.circle.one {
margin-left: 0;
}
.circle.three {
margin-right: 0;
}
.shape {
width: 30%;
margin: 1em 1%;
}
.shape.onetwo {
margin-left: 2.5%;
clear: left;
border-top-right-radius: 1em;
}
.shape.twothree {
margin-right: 2.5%;
border-top-left-radius: 1em;
}
.shape.onethree {
margin-top: 3em;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
}
.shape.onetwothree {
clear: both;
width: 40%;
margin-left: 30%;
margin-right: 30%;
border-radius: 1.5em;
}
}
@supports (shape-outside: polygon(0 0, 0 50%, 50% 50%)) {
.Venn::after {
display: none;
}
.Venn > div {
box-sizing: border-box;
/*border: 0.1em solid rgba(0, 0, 0, 0.5);*/
font-size: calc(2.5vw * var(--venn-width-mult));
line-height: 1.3;
overflow: hidden;
}
.Venn > .shape {
font-size: calc(2.25vw * var(--venn-width-mult));
border: initial;
width: initial;
margin: initial;
padding: initial;
}
.Venn > .circle {
border-radius: 50%;
width: initial;
margin: initial;
padding: initial;
}
/* Grid layout */
.Venn {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, calc(28.8vw * var(--venn-width-mult)));
}
.Venn > h2 {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 0;
grid-row-end: 1;
}
.Venn > .circle.one {
/* outline: .2em solid #f00; */
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.Venn > .circle.two {
/* outline: .2em solid #0f0; */
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 3;
}
.Venn > .circle.three {
/* outline: .2em solid #00f; */
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
}
.Venn > .shape.onetwo {
/* outline: .2em solid #ff0; */
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.Venn > .shape.onethree {
/* outline: .2em solid #f0f; */
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 2;
}
.Venn > .shape.twothree {
/* outline: .2em solid #0ff; */
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 2;
}
.Venn > .shape.onetwothree {
/* outline: .2em solid #fff; */
grid-column-start: 3;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 2;
}
/* Text wrap */
.Venn .circle,
.Venn .shape {
text-align: center;
}
.Venn .circle span,
.Venn .shape span {
box-sizing: border-box;
float: right;
/* border: 1px dotted #00f;
background-color: rgba(0,0,0,.1); */
}
.Venn .circle > span {
width: calc(58.5vw * var(--venn-width-mult));
height: calc(58.5vw * var(--venn-width-mult));
}
.Venn .shape > span {
height: calc(29vw * var(--venn-width-mult));
}
.Venn .one > span {
float: left;
width: 32%;
shape-margin: 0;
shape-outside: polygon(
100% 0%,
0% 0%,
0% 100%,
100% 100%,
100% 92%,
76% 88%,
44% 80%,
20% 70%,
10% 60%,
5% 50%,
10% 40%,
20% 30%,
41% 20%,
70% 10%,
100% 5%
);
}
.Venn .one > span + span {
float: right;
width: 66%;
shape-outside: polygon(
100% 0%,
40% 0%,
65% 15%,
53% 25%,
47% 35%,
44% 45%,
43% 50%,
31% 55%,
12% 65%,
5% 75%,
0% 85%,
0% 100%,
100% 100%
);
}
.Venn .two > span {
float: left;
width: 66%;
shape-margin: 0;
shape-outside: polygon(
0% 0%,
60% 0%,
35% 15%,
47% 25%,
53% 35%,
56% 45%,
57% 50%,
69% 55%,
88% 65%,
95% 75%,
100% 85%,
100% 100%,
0% 100%
);
}
.Venn .two > span + span {
float: right;
width: 32%;
shape-outside: polygon(
0% 0%,
100% 0%,
100% 100%,
0% 100%,
0% 92%,
24% 88%,
56% 80%,
80% 70%,
90% 60%,
95% 50%,
90% 40%,
80% 30%,
59% 20%,
30% 10%,
0% 5%
);
}
.Venn .three > span {
float: left;
width: 49%;
shape-margin: 0;
shape-outside: polygon(
0% 0%,
100% 0%,
100% 40%,
75% 47%,
50% 50%,
2% 50%,
5% 60%,
13% 70%,
27% 80%,
52% 90%,
78% 95%,
100% 97%,
100% 100%,
0% 100%
);
}
.Venn .three > span + span {
float: right;
shape-outside: polygon(
100% 0%,
0% 0%,
0% 40%,
25% 47%,
50% 50%,
98% 50%,
95% 60%,
87% 70%,
73% 80%,
48% 90%,
22% 95%,
0% 97%,
0% 100%,
100% 100%
);
}
.Venn .onetwo > span {
float: left;
width: 49%;
shape-margin: 0;
shape-outside: polygon(
0% 0%,
100% 0%,
100% 30%,
72% 40%,
48% 50%,
20% 70%,
10% 85%,
0% 98%,
100% 98%,
100% 100%,
0% 100%
);
}
.Venn .onetwo > span + span {
float: right;
shape-outside: polygon(
100% 0%,
0% 0%,
0% 30%,
28% 40%,
52% 50%,
80% 70%,
90% 85%,
100% 98%,
0% 98%,
0% 100%,
100% 100%
);
}
.Venn .onethree > span {
float: left;
width: 48%;
shape-margin: 0;
shape-outside: polygon(
0% 0%,
100% 0%,
100% 5%,
70% 20%,
45% 35%,
26% 50%,
10% 75%,
5% 90%,
50% 98%,
100% 95%,
100% 100%,
0% 100%
);
}
.Venn .onethree > span + span {
float: right;
width: 51%;
shape-outside: polygon(
100% 0%,
0% 0%,
0% 25%,
9% 40%,
20% 55%,
40% 70%,
30% 80%,
0% 90%,
0% 100%,
100% 100%
);
}
.Venn .twothree > span {
float: left;
width: 51%;
shape-margin: 0;
shape-outside: polygon(
0% 0%,
100% 0%,
100% 25%,
91% 40%,
80% 55%,
60% 70%,
70% 80%,
100% 90%,
100% 100%,
0% 100%
);
}
.Venn .twothree > span + span {
float: right;
width: 48%;
shape-outside: polygon(
100% 0%,
0% 0%,
0% 5%,
30% 20%,
55% 35%,
74% 50%,
90% 75%,
95% 90%,
50% 98%,
0% 95%,
0% 100%,
100% 100%
);
}
.Venn .onetwothree > span {
float: left;
width: 49%;
shape-margin: 0;
shape-outside: polygon(
0% 0%,
10% 15%,
30% 35%,
50% 50%,
95% 70%,
100% 100%,
0% 100%
);
}
.Venn .onetwothree > span + span {
float: right;
shape-outside: polygon(
100% 0%,
90% 15%,
70% 35%,
50% 50%,
5% 70%,
0% 100%,
100% 100%
);
}
.Venn .circle h3 {
margin: 0.5em 0 0 0;
text-align: center;
}
.Venn .circle h3 + * {
margin-top: 0.2em;
}
.Venn .shape h3 {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
}
/* Show the boxes */
.Venn.guides > .circle.one {
outline: 0.2em solid #f00;
}
.Venn.guides > .circle.two {
outline: 0.2em solid #0f0;
}
.Venn.guides > .circle.three {
outline: 0.2em solid #00f;
}
.Venn.guides > .shape.onetwo {
outline: 0.2em solid #ff0;
}
.Venn.guides > .shape.onethree {
outline: 0.2em solid #f0f;
}
.Venn.guides > .shape.twothree {
outline: 0.2em solid #0ff;
}
.Venn.guides > .shape.onetwothree {
outline: 0.2em solid #fff;
}
.Venn.guides .circle span,
.Venn.guides .shape span {
border: 1px dotted #000;
background-color: rgba(0, 0, 0, 0.1);
}
.Venn.guides > div {
/*border: 0.1em solid rgba(0, 0, 0, 0.5);*/
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.