circletype.js

by J. Vázquez

HTML

<script type="text/javascript" src="https://www.jvldesign.es/uploads/scripts/circletype-min.js"></script>
<p id="demo">Texto con curva hacia arriba</p>
<p id="demo2">Texto con curva hacia abajo</p>
<p id="demo3">EMJOIS❤❤❤❤❤❤❤❤❤❤❤</p>

CSS

#demo, #demo2, #demo3 {
  font-size:24px;
  font-family:'Arial';
  color:#70b3ad;  
  font-weight:bold; 
}

#demo3 {
 animation: emoji 10s infinite;
}
@keyframes emoji{
    from{
       transform:rotate(0deg);
    }
    to{
       transform:rotate(360deg);
    }
}

JavaScript

new CircleType(document.getElementById('demo'))
  .radius(200);

new CircleType(document.getElementById('demo2'))
  .dir(-1)
  .radius(200);
  
new CircleType(document.getElementById('demo3'))
  .radius(50);