Advertisement
teenagegoths

rotating circle text

Sep 13th, 2021 (edited)
1,825
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- full example here: https://codepen.io/tubbox/pen/eYREvVv -->
  2. <style>
  3. #container { margin: 0%; }
  4.  
  5. #circle { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden;
  6. transform:scale(1.35,1.35);
  7. text-shadow:1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; }
  8.  
  9. #circle text { font-family: 'Helvetica Neue', Arial; font-size: 6.9px; }
  10.  
  11. #circle svg { position: absolute; left: 0; top: 0; width: 100%; height: 540px;
  12.  
  13. animation-name: rotate;
  14.  
  15. animation-duration: 20s;
  16.  
  17. animation-iteration-count: infinite;
  18.  
  19. animation-timing-function: linear;
  20.  
  21. }
  22. @keyframes rotate {
  23. from { transform: rotate(360deg); }
  24. to { transform: rotate(0); }
  25. }
  26. </style>
  27. <div id="container">
  28. <div id="circle">
  29. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
  30. <defs>
  31. <path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
  32. </defs>
  33. <circle cx="150" cy="100" r="75" fill="none"/>
  34. <g>
  35. <use xlink:href="#circlePath" fill="none"/>
  36. <text fill="#fff">
  37. <textPath xlink:href="#circlePath">this is not to say that horror is itself a form of religion; rather, horror emerges from the same well of human imagination...</textPath>
  38. </text>
  39. </g>
  40. </svg>
  41. </div>
  42. </div>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement