<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();
