<svg viewBox="0 0 100 100">
<circle r="48" cx="50" cy="50" />
<foreignObject id="text" width="100" height="100">
<div class="shape shape-left"></div>
<div class="shape shape-right"></div>
<div class="text">
<h1>Flowing text inside a shape</h1>
<p>This technique uses two shapes set as shape-outside to flow text within a shape, mimicking the functionality of the shape-inside property. It's implemented in an SVG foreignObject tag so it's scalable. Edit the text and notice how it stays within its bounds.</p>
</div>
</foreignObject>
</svg>
body {
height:100vh;
margin:0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
background-color:#f4f4f4;
}
svg {
margin: auto;
width:50%;
max-width:100%;
}
svg circle {
fill:red;
}
.shape {
height:100%;
width:50px;
shape-margin:3px;
}
.shape-left {
float:left;
shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/circle-left.svg);
}
.shape-right {
float:right;
shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/circle-right.svg);
}
.text {
color:#fff;
font-size:4px;
width:100px;
height:100%;
text-align:center;
line-height:1.6;
-webkit-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
}
h1 {
font-size: 7px;
margin-bottom: 5px;
padding-top: 10px;
text-align:center;
}
p {
margin: 0;
text-align: justify;
text-align-last: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.