.container(style=`--hue: ${Math.random() * 360}`)
svg(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 64.228 27.004')
path(d='M32.074 13.446s-2.706-2.965-4.158-4.349c-2.003-1.908-3.941-3.942-6.268-5.437C19.33 2.173 16.838.747 14.132.24 13.01.028 11.818.152 10.71.43 8.61.96 6.534 1.85 4.826 3.18a11.59 11.59 0 00-3.262 3.998C.624 9.104.186 11.304.136 13.446c-.04 1.678.287 3.389.884 4.957.602 1.579 1.477 3.106 2.655 4.318 1.545 1.59 3.456 2.957 5.564 3.645 1.786.583 3.783.636 5.629.288 1.861-.35 3.56-1.354 5.18-2.334 1.82-1.1 3.429-2.525 5.021-3.934 3.71-3.281 6.94-7.07 10.522-10.49 1.692-1.614 3.369-3.253 5.18-4.732 1.614-1.318 3.155-2.82 5.054-3.678C47.606.68 49.595.147 51.549.206c2.04.062 4.1.705 5.884 1.696 1.492.827 2.796 2.047 3.806 3.421 1.138 1.55 1.896 3.39 2.399 5.245.361 1.334.547 2.75.415 4.126-.155 1.628-.675 3.238-1.407 4.7-.754 1.507-1.775 2.913-3.006 4.062-1.202 1.122-2.603 2.12-4.157 2.655-1.701.585-3.583.692-5.373.511-1.819-.183-3.611-.78-5.245-1.599-1.833-.92-3.405-2.304-4.957-3.645-2.811-2.43-7.834-7.932-7.834-7.932' fill='none')
.text(data-splitting='') Infinite
View Compiled
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap')
*
box-sizing border-box
body
background hsl(0, 0%, 5%)
min-height 100vh
display flex
align-items center
justify-content center
font-family 'Lato', sans-serif
.container
height 60vmin
position relative
width 60vmin
.char
--delay calc(((var(--char-total) - var(--char-index))) - var(--word-index))
offset-path path(var(--path))
animation travel 6s calc((var(--delay) * (0.15)) * -1s) infinite linear both
offset-rotate auto 180deg
position absolute !important
font-size 4vmin
font-weight bold
top 0%
left 0%
transform translate(0, -0.5vmin)
color hsl(0, 0%, 95%)
svg
height 100%
width 100%
path
stroke 'hsla(%s, 100%, 50%, 0.25)' % var(--hue, 0)
stroke-width 0.25px
.gradient
height 0
width 0
@keyframes travel
from
offset-distance 0%
to
offset-distance 100%
View Compiled
const { d3, Splitting, Meanderer } = window
const CONTAINER = document.querySelector('.container')
const PATH = 'M32.074 13.446s-2.706-2.965-4.158-4.349c-2.003-1.908-3.941-3.942-6.268-5.437C19.33 2.173 16.838.747 14.132.24 13.01.028 11.818.152 10.71.43 8.61.96 6.534 1.85 4.826 3.18a11.59 11.59 0 00-3.262 3.998C.624 9.104.186 11.304.136 13.446c-.04 1.678.287 3.389.884 4.957.602 1.579 1.477 3.106 2.655 4.318 1.545 1.59 3.456 2.957 5.564 3.645 1.786.583 3.783.636 5.629.288 1.861-.35 3.56-1.354 5.18-2.334 1.82-1.1 3.429-2.525 5.021-3.934 3.71-3.281 6.94-7.07 10.522-10.49 1.692-1.614 3.369-3.253 5.18-4.732 1.614-1.318 3.155-2.82 5.054-3.678C47.606.68 49.595.147 51.549.206c2.04.062 4.1.705 5.884 1.696 1.492.827 2.796 2.047 3.806 3.421 1.138 1.55 1.896 3.39 2.399 5.245.361 1.334.547 2.75.415 4.126-.155 1.628-.675 3.238-1.407 4.7-.754 1.507-1.775 2.913-3.006 4.062-1.202 1.122-2.603 2.12-4.157 2.655-1.701.585-3.583.692-5.373.511-1.819-.183-3.611-.78-5.245-1.599-1.833-.92-3.405-2.304-4.957-3.645-2.811-2.43-7.834-7.932-7.834-7.932z'
const WIDTH = 64.228
const HEIGHT = 27.004
const responsivePath = new Meanderer({
path: PATH,
width: WIDTH,
height: HEIGHT,
})
const setPath = () => {
const scaledPath = responsivePath.generatePath(
CONTAINER.offsetWidth,
CONTAINER.offsetHeight
)
CONTAINER.style.setProperty('--path', `"${scaledPath}"`)
}
Splitting()
const SizeObserver = new ResizeObserver(setPath)
SizeObserver.observe(CONTAINER)
View Compiled