<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>offset_path_circular_text</title>
<link rel="stylesheet" href="../shared.css" />
</head>
<body style="width: 1200px; height: 630px">
<div
style="
display: flex;
position: relative;
width: 1200px;
height: 630px;
background-color: rgb(255, 255, 255);
"
>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 0%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(233, 69, 96)"
>★</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 2.9411764%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(243, 146, 55)">
</span>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 5.882353%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(255, 202, 58)"
>T</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 8.823529%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(138, 201, 38)"
>A</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 11.764706%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(25, 130, 196)"
>K</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 14.705883%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(106, 76, 147)"
>U</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 17.647058%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(233, 69, 96)"
>M</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 20.588236%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(243, 146, 55)"
>I</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 23.529411%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(255, 202, 58)">
</span>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 26.470589%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(138, 201, 38)"
>★</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 29.411766%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(25, 130, 196)">
</span>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 32.352943%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(106, 76, 147)"
>M</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 35.294117%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(233, 69, 96)"
>O</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 38.235294%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(243, 146, 55)"
>T</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 41.17647%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(255, 202, 58)"
>I</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 44.11765%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(138, 201, 38)"
>O</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 47.058823%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(25, 130, 196)"
>N</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 50%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(106, 76, 147)">
</span>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 52.941177%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(233, 69, 96)"
>P</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 55.88235%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(243, 146, 55)"
>A</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 58.823532%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(255, 202, 58)"
>T</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 61.764706%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(138, 201, 38)"
>H</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 64.70589%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(25, 130, 196)">
</span>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 67.64706%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(106, 76, 147)"
>★</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 70.588234%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(233, 69, 96)">
</span>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 73.52941%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(243, 146, 55)"
>O</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 76.47059%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(255, 202, 58)"
>F</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 79.411766%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(138, 201, 38)"
>F</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 82.35294%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(25, 130, 196)"
>S</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 85.29411%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(106, 76, 147)"
>E</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 88.2353%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(233, 69, 96)"
>T</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 91.17647%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(243, 146, 55)">
</span>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 94.117645%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(255, 202, 58)"
>★</span
>
</div>
<div
style="
display: flex;
position: absolute;
left: 0px;
top: 0px;
offset-path: circle(240px at 600px 315px);
offset-distance: 97.05882%;
offset-rotate: auto;
"
>
<span style="display: flex; font-size: 40px; font-weight: 700; color: rgb(138, 201, 38)">
</span>
</div>
</div>
</body>
</html>
