"Text Around Circle"
Bootstrap 4.1.1 Snippet by trinhquan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Custom 1</title> <link rel="stylesheet" href=""> </head> <body> <div class="parent"> <div class="wrapper"> <svg class="svg1" viewBox="0 0 300 200"> <path id="the_rect" d="M20,20H280V180H20V20H280V180H20V20z" /> <text stroke="#000000" font-size="20"> <textPath id="tp" xlink:href="#the_rect" startOffset="0%">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</textPath> </text> </svg> <div class="image1-wrapper"> <img class="image1" src="https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-full-space-abstract-creative-electric-music-punk-rock-background-guitarheadsettechnologymetalc4darrangingeffectbalancedplugin-image_87069.jpg" alt=""> <div class="overlay"></div> <div class="vertical-line"></div> <div class="horizontal-line"></div> </div> <div class="inner"> <svg class="text-around-circle" width="300" height="260" viewBox="0 0 300 260"> <path id="curve" fill="transparent" d="M30,130a120,120 0 1,0 240,0a120,120 0 1,0 -240,0"/> <text style="transform:translate3d(0,0,0);"> <textPath startOffset="0" style="transform:translate3d(0,0,0);" xlink:href="#curve" id="text-path">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</textPath> </text> </svg> <div class="circle"> <img src="https://res.cloudinary.com/teepublic/image/private/s--6ggk9imn--/t_Resized%20Artwork/c_fit,g_north_west,h_1054,w_1054/co_ffffff,e_outline:53/co_ffffff,e_outline:inner_fill:53/co_bbbbbb,e_outline:3:1000/c_mpad,g_center,h_1260,w_1260/b_rgb:eeeeee/c_limit,f_auto,h_630,q_90,w_630/v1552132756/production/designs/4373584_0.jpg"/> </div> </div> </div> </div> </body> </html>
body { margin: 5rem 0; min-height: 200vh; } circle { fill: transparent; } text { fill: yellow; font-size: 18px; text-transform: uppercase; } svg.text-around-circle { animation: rotating 5s linear infinite; } .parent { position: relative; } .circle { background: #FFF12D; position: absolute; top: 40px; left: 60px; /*width : 180px; height: 180px; border-radius: 50%;*/ z-index: -1; } .circle img { position: absolute; /*left: calc(50% - 75px); top: calc(50% - 75px); width: 150px;*/ width: 180px; height: 180px; border-radius: 50%; } textPath::selection { background: none; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } svg.svg1 { fill:none; background: #000; } .wrapper { position: relative; } .wrapper .image1-wrapper { position: absolute; top: 125px; left: 125px; right: 125px; bottom: 125px; width: calc(100% - 250px); height: calc(100% - 250px); } .wrapper .image1-wrapper img { position: relative; width: 100%; height: 100%; border-radius: 50px; } .wrapper .image1-wrapper .overlay { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .wrapper .image1-wrapper .vertical-line:before { position: absolute; content: ""; top: 33.333333%; left: 0; width: 100%; height: 1px; background: #333; } .wrapper .image1-wrapper .vertical-line:after { position: absolute; content: ""; top: 66.666666%; left: 0; width: 100%; height: 1px; background: #333; } .wrapper .image1-wrapper .horizontal-line:before { position: absolute; content: ""; left: 33.333333%; top: 0; width: 1px; height: 100%; background: #333; } .wrapper .image1-wrapper .horizontal-line:after { position: absolute; content: ""; left: 66.666666%; top: 0; width: 1px; height: 100%; background: #333; } .inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
let so = 50 function Marquee(){ requestAnimationFrame(Marquee); tp.setAttributeNS(null,"startOffset",so+"%"); if (so <= 0) { so = 50; } so-= .05; } Marquee();

Related: See More


Questions / Comments: