<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.