How do I get text wrap in a circle shape?

You can do this in SVG with a <textPath>. If you use SVG you won't need to break up the text into separate characters. The path is just a circle written using elliptical arc commands.

<svg viewBox="0 0 400 400">
  <defs>
    <path id="MyPath"
          d="M 200, 200
             m -100, 0
             a 100,100 0 1,1 200,0
             a 100,100 0 1,1 -200,0
" />
  </defs>

  <text font-family="Verdana" font-size="30" fill="rgb(248,203,173)" stroke="rgb(237,125,49)">
    <textPath xlink:href="#MyPath">
      I want to bend my text around the circle.
    </textPath>
  </text>
  <circle fill="none" stroke="rgb(165,195,251)" cx="200" cy="200" r="80" stroke-width="10" filter="blur(3px)" />
  <circle fill="rgb(146,208,80)" stroke="rgb(169,209,142)" stroke-width="2px" cx="200" cy="200" r="78" />
</svg>

SVG approach is simple and compact, but what if you need something more flexible? Here is my solution with JavaScript .

window.addEventListener('load', wrap);

function wrap() {
  var image = document.querySelector('#image-to-wrap');
  var text = document.querySelector('#wrapping-text');

  var start = -90;
  var angle = 360;

  var radius = image.clientHeight / 2;
  var centerX = image.getBoundingClientRect().left + radius;
  var centerY = image.getBoundingClientRect().top + radius;
  var characters = text.innerHTML.split('');
  var step = angle / characters.length - 1;

  text.innerHTML = '';

  for (var i = 0; i < characters.length; i++) {
    buildItem(i);
  }

  function buildItem(i) {
    var item = document.createElement('span');
    item.innerHTML = characters[i];
    text.appendChild(item);
    var w = item.clientWidth;
    var h = item.clientHeight;
    var a = (start + step * i) * Math.PI / 180;
    item.style.left = centerX - w / 2 + radius * Math.sin(a) + 'px';
    item.style.top = centerY - h - radius * Math.cos(a) + 'px';
    item.style.transform = 'rotate(' + a + 'rad)';
  }
}

#image-to-wrap {
  height: 250px;
  margin: 50px;
  width: 250px;
}

#wrapping-text {
  color: MistyRose;
  font-family: serif;
  font-size: 50px;
  -webkit-text-stroke: 1px Salmon;
}

#wrapping-text span {
  position: absolute;
  transform-origin: 50% 100%;
}

<img id="image-to-wrap" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Reinel_wind_rose_round.png">
<p id="wrapping-text">Reinel wind rose round</p>

You can use the transform(rotate) in css3 to do this.

body{
    text-align: center;
    margin-top: 30px;
}
#corner{
    margin-top: 50px;
    background: #92d050;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: inline-block;
    -webkit-box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb;
    box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb;
}

.contaner {
    position: relative;
    width: 280px;
    margin: auto;
  }
  
   span {
       font-family: 'sans-serif', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    color: #f8cbad;
    -webkit-text-stroke: 1px #ed7d31;
    font-size: 30px;
  }
  
  .char1 {
    transform: rotate(-90deg);
    left: 26px;
    top: 105px;
  }
  
  .char2 {
    transform: rotate(-72deg);
    left: 21px;
    top: 78px;
  }
  
  .char3 {
    transform: rotate(-56deg);
    left: 33px;
    top: 58px;
  }
  
  .char4 {
    transform: rotate(-56deg);
    left: 44px;
    top: 43px;
  }
  
  .char5 {
    transform: rotate(-49deg);
    left: 57px;
    top: 31px;
  }
  
  .char6 {
    transform: rotate(-37deg);
    left: 72px;
    top: 18px;
  }
  
  .char7 {
    transform: rotate(-32deg);
    left: 82px;
    top: 9px;
  }
  
  .char8 {
    transform: rotate(-17deg);
    left: 104px;
    top: 2px;
  }
  
  .char9 {
    transform: rotate(-8deg);
    left: 123px;
    top: -1px;
  }
  
  .char10 {
    transform: rotate(7deg);
    left: 143px;
    top: 0px;
  }
  
  .char11 {
    transform: rotate(13deg);
    left: 161px;
    top: 3px;
  }
  
  .char12 {
    transform: rotate(36deg);
    left: 184px;
    top: 18px;
  }
  
  .char13 {
    transform: rotate(45deg);
    left: 207px;
    top: 33px;
  }
  
  .char14 {
    transform: rotate(68deg);
    left: 224px;
    top: 54px;
  }
  
  .char15 {
    transform: rotate(68deg);
    left: 229px;
    top: 69px;
  }
  
  .char16 {
    transform: rotate(83deg);
    left: 234px;
    top: 89px;
  }
  
  .char17 {
    transform: rotate(90deg);
    left: 239px;
    top: 105px;
  }
  
  .char18 {
    transform: rotate(114deg);
    left: 235px;
    top: 133px;
  }
  
  .char19 {
    transform: rotate(114deg);
    left: 233px;
    top: 146px;
  }
  
  .char20 {
    transform: rotate(122deg);
    left: 222px;
    top: 157px;
  }

  .char22 {
    transform: rotate(143deg);
    left: 196px;
    top: 187px;
  }
  
  .char21 {
    transform: rotate(132deg);
    left: 211px;
    top: 173px;
  }
    
  .char23 {
    transform: rotate(152deg);
    left: 179px;
    top: 196px;
  }
  
  .char24 {
    transform: rotate(172deg);
    left: 154px;
    top: 206px;
  }
  
  .char25 {
    transform: rotate(178deg);
    left: 131px;
    top: 208px;
  }

  .char25d {
    transform: rotate(189deg);
    left: 112px;
    top: 207px;
  }

  .char26 {
    transform: rotate(213deg);
    left: 86px;
    top: 198px;
  }

  .char27 {
    transform: rotate(219deg);
    left: 79px;
    top: 190px;
  }

  .char28 {
    transform: rotate(220deg);
    left: 66px;
    top: 183px;
  }

  .char29 {
    transform: rotate(228deg);
    left: 50px;
    top: 171px;
  }

  .char30{
    transform: rotate(241deg);
    left: 44px;
    top: 157px;
  }

  .char31{
    transform: rotate(241deg);
    left: 30px;
    top: 142px;
  }

  .char32{
    transform: rotate(241deg);
    left: 24px;
    top: 127px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
<div class="contaner">

    <p id="corner"></p>
    <!-- <p>I want to bend my text around the circle.</p> -->

    <span class="char1">I</span>

    <span class="char2">w</span>
    <span class="char3">a</span>
    <span class="char4">n</span>
    <span class="char5">t</span>

    <span class="char6">t</span>
    <span class="char7">o</span>

    <span class="char8">b</span>
    <span class="char9">e</span>
    <span class="char10">n</span>
    <span class="char11">d</span>

    <span class="char12">m</span>
    <span class="char13">y</span>

    <span class="char14">t</span>
    <span class="char15">e</span>
    <span class="char16">x</span>
    <span class="char17">t</span>

    <span class="char18">a</span>
    <span class="char19">r</span>
    <span class="char20">o</span>
    <span class="char21">u</span>
    <span class="char22">n</span>
    <span class="char23">d</span>

    <span class="char24">t</span>
    <span class="char25">h</span>
    <span class="char25d">e</span>

    <span class="char26">c</span>
    <span class="char27">i</span>
    <span class="char28">r</span>
    <span class="char29">c</span>
    <span class="char30">l</span>
    <span class="char31">e</span>
    
    <span class="char32">.</span>

</div>

    



</body>

</html>

How do I get text wrap in a circle shape?

Tags:

Javascript

Html

Css

Related

Recent Posts