Skip to content

Commit 4337364

Browse files
author
RAJA CHARLES DHARMARAJ
committed
Circular Text
0 parents  commit 4337364

File tree

2 files changed

+67
-0
lines changed

2 files changed

+67
-0
lines changed

index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Background Slider</title>
8+
</head>
9+
<body>
10+
11+
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
12+
<title>Circular Text Path</title>
13+
<defs>
14+
<path id="textcircle" d="M250,400
15+
a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z" transform="rotate(12,250,250)" />
16+
</defs>
17+
<g class="textcircle">
18+
<text textLength="940">
19+
<textPath
20+
xlink:href="#textcircle"
21+
aria-label="CSS & SVG are awesome"
22+
textLength="940">
23+
CSS &amp; SVG are awesome | CSS &amp; SVG are awesome |&#160;
24+
</textPath>
25+
</text>
26+
</g>
27+
</svg>
28+
</body>
29+
</html>

style.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body {
2+
background-color: #003;
3+
display: grid;
4+
place-items: center;
5+
min-height: 100vh;
6+
overflow: hidden;
7+
}
8+
9+
text {
10+
fill: white;
11+
font-family: "Lato", sans-serif;
12+
font-size: 22px;
13+
font-weight: 500;
14+
text-transform: uppercase;
15+
font-variant-ligatures: none;
16+
letter-spacing: 6px;
17+
animation: rotate 25s linear infinite;
18+
transform-origin: 250px 250px;
19+
}
20+
21+
svg{
22+
max-width: 80vmin;
23+
}
24+
25+
@keyframes rotate {
26+
to {
27+
transform: rotate(360deg);
28+
}
29+
}
30+
31+
.textcircle {
32+
transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
33+
transform-origin: 250px 250px;
34+
}
35+
36+
svg:hover .textcircle {
37+
transform: scale(1.2) rotate(90deg);
38+
}

0 commit comments

Comments
 (0)