<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-labelledby="t">
<image href="https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
width="200" height="200"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#blobClip)"/>
<clipPath id="blobClip">
<path d="M43.1,-68.5C56.2,-58.6,67.5,-47.3,72.3,-33.9C77.2,-20.5,75.5,-4.9,74.2,11.3C72.9,27.6,71.9,44.5,63.8,57.2C55.7,69.8,40.6,78.2,25.5,79.2C10.4,80.1,-4.7,73.6,-20.9,69.6C-37.1,65.5,-54.5,63.9,-66,54.8C-77.5,45.8,-83.2,29.3,-85.7,12.3C-88.3,-4.8,-87.7,-22.3,-79.6,-34.8C-71.5,-47.3,-55.8,-54.9,-41.3,-64.2C-26.7,-73.6,-13.4,-84.7,0.8,-86C15,-87.2,29.9,-78.5,43.1,-68.5Z"
transform="translate(100 100)"/>
</clipPath>
<path
class="blob"
d="M43.1,-68.5C56.2,-58.6,67.5,-47.3,72.3,-33.9C77.2,-20.5,75.5,-4.9,74.2,11.3C72.9,27.6,71.9,44.5,63.8,57.2C55.7,69.8,40.6,78.2,25.5,79.2C10.4,80.1,-4.7,73.6,-20.9,69.6C-37.1,65.5,-54.5,63.9,-66,54.8C-77.5,45.8,-83.2,29.3,-85.7,12.3C-88.3,-4.8,-87.7,-22.3,-79.6,-34.8C-71.5,-47.3,-55.8,-54.9,-41.3,-64.2C-26.7,-73.6,-13.4,-84.7,0.8,-86C15,-87.2,29.9,-78.5,43.1,-68.5Z"
transform="translate(100 100)"
fill="url(#imgFill)"
/>
<path
id="text" d="M43.1,-68.5C56.2,-58.6,67.5,-47.3,72.3,-33.9C77.2,-20.5,75.5,-4.9,74.2,11.3C72.9,27.6,71.9,44.5,63.8,57.2C55.7,69.8,40.6,78.2,25.5,79.2C10.4,80.1,-4.7,73.6,-20.9,69.6C-37.1,65.5,-54.5,63.9,-66,54.8C-77.5,45.8,-83.2,29.3,-85.7,12.3C-88.3,-4.8,-87.7,-22.3,-79.6,-34.8C-71.5,-47.3,-55.8,-54.9,-41.3,-64.2C-26.7,-73.6,-13.4,-84.7,0.8,-86C15,-87.2,29.9,-78.5,43.1,-68.5Z"
transform="translate(100 100)"
fill="none" stroke="none"
pathLength="100"
/>
<text class="text-content">
<textPath href="#text" startOffset="0%">❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE
<animate attributeName="startOffset" from="0%" to="100%" dur="15s" repeatCount="indefinite" />
</textPath>
<textPath href="#text" startOffset="100%">❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE ❤ MADE WITH LOVE
<animate attributeName="startOffset" from="-100%" to="0%" dur="15s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
<p id="dev">Developed with <span>❤</span> by <a href="https://codepen.io/designfenix/" target="_blank">Fernando Cohen</a> </p>
body{
display: flex;
min-height:100vh;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 50%, #F4C6A5 0%, #F9D9C2 10%, #FFF3E9 30%);
}
svg{
max-width: 70vw;
max-height: 80vh;
aspect-ratio: 1/1;
#blobClip{
transform-origin: center;
transition: ease-out transform .4s;
}
&:hover{
#blobClip{
transform: scale(1.15) translate(0%, 0%);
}
.text-content{
fill: white;
mix-blend-mode: overlay;
}
}
}
.text-content {
font: 700 10px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
letter-spacing: 1.5px;
text-transform: uppercase;
fill: black;
mix-blend-mode: normal;
transition: ease fill .5s;
}
/*Dev*/
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,750,700");
#dev {
font-family: "Montserrat", sans-serif;
position: fixed;
font-size: 14px;
top: 10px;
left: 10px;
padding: 1em;
color: #333;
background-color: white;
border-radius: 25px;
cursor: pointer;
a {
text-decoration: none;
font-weight: bold;
color: #333;
transition: ease all 0.4s;
&:hover {
color: #ef5350;
text-decoration: underline;
}
}
span {
display: inline-block;
transition: ease all 0.4s;
color: pink;
&:hover {
transform: scale(1.2);
}
}
}
