1

I'm trying to create an SVG animation where a shape continuously deforms (like a breathing or liquid blob). The goal is to later place text inside the shape so that the text appears to deform along with it, kind of a “spatial” or elastic text effect. enter image description here I've managed to animate the shape using on the polygon points, but I’m stuck on how to make the text fit or deform with the shape. I tried converting the text into an SVG path, but it doesn’t move or distort with the polygon’s animation.

And I wonder ... do you think i ma on the right path or should i use three.js?

:root {
  color-scheme: light dark;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 800px at 50% 20%, #fff 0, #f3f3f3 40%, #e9e9e9 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.frame {
  width: min(70vmin, 520px);
  aspect-ratio: 5 / 3;
  display: grid;
  place-items: center;
}

svg {
  width: 80%;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .18));
}

.blob {
  fill: #000;
}
<div class="frame">
  <svg viewBox="0 0 200 120" role="img">
      <polygon class="blob"
        points="30,40 170,40 170,80 170,80 30,80 30,40">
        <animate attributeName="points"
                 dur="4s"
                 repeatCount="indefinite"
                 calcMode="spline"
                 keyTimes="0;0.25;0.5;0.75;1"
                 keySplines=".25 .1 .25 1; .25 .1 .25 1; .25 .1 .25 1; .25 .1 .25 1"
                 values="
                  30,40 170,40 170,80 170,80 30,80 30,40;
                  100,20 160,50 140,100 60,100 40,50 100,20;
                  100,10 170,50 170,90 100,110 30,90 30,50;
                  100,20 160,50 140,100 60,100 40,50 100,20;
                  30,40 170,40 170,80 170,80 30,80 30,40
                 " />
      </polygon>
    </svg>
</div>

Improve this question
2
  • Convert the text to a path and then animate the path's vertices just as you're animated the polygon's points. Commented Oct 16 at 16:29
  • You can transform the polygon in a path and then use the path as a textPath for a text element. In order to see if this is what you want you can change polygon to path, and the points attribute to a d attribute and add an M command like so: <path class="blob" d="M30,40 170,40 170,80 170,80 30,80 30,40"> also you need to ad an id so that it can be referenced Commented Oct 16 at 17:58
Related questions
6167
How to disable text selection highlighting
5098
How can I horizontally center an element?
3007
How can I transition height: 0; to height: auto; using CSS?
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.