How to animate a SVG polygon to fill? - html

Question

I have a SVG letter (A) that consists of two polygon and a rectangle. I want to animate them in a way that the first polygon grows to visible and then the second one. After that, the rectangle will grow to be visible. Before the start of the animation, the SVG will not be visible.
I have tried keyframe strokes but as they are not path based but points of polygon, it didn't work.
<svg height="600" width="800">
<polygon points="34 537,150 536,289 130,314 53,196 51"/>
<animate attributeName="points" dur="5s" fill="freeze" />
<polygon points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
<rect x="120" y="320" stroke-miterlimit="10" width="270" height="120"/>
</svg>
Here is a pen if you want to work on it : https://codepen.io/anon/pen/vMxXaP

Answer 1

You can still draw the (A) letter by using polygons with stroke instead of fill. The following example uses two keyframe animations on stroke-dasharray to draw the A letter in two steps :
First step for the top left and top right line (first polygon element in the svg)
Second step for the horizontal line closing the A (second polygon in the svg element)
.letter {
width:200px;height:auto;
stroke-width:2.5;
stroke:#000;
fill:none;
stroke-dasharray: 0 24;
}
.animateFirst { animation: 0.5s animateFirst ease-in forwards; }
.animateSecond { animation: 0.2s 0.45s animateSecond ease-out forwards; }
#keyframes animateFirst {
to { stroke-dasharray: 24 24; }
}
#keyframes animateSecond {
to { stroke-dasharray: 6 24; }
}
<svg class="letter" viewbox="0 0 12 10">
<polygon class="animateFirst" points="1,11.5 6,0 11,11.5" />
<polygon class="animateSecond" points="3,6.5 9,6.5" />
</svg>

Answer 2

Bonus version. Here i turned your paths into mask and added background animation.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800">
<style>
svg {
height:160px;
background: url(https://i.imgur.com/Pr8tfnT.png);
background-position: 0px 111px;
background-repeat: repeat-x;
background-size: 100%;
animation: water 10s forwards;
}
#keyframes water {
100% {
background-position: 2000px 0px;
}
}
</style>
<mask id="mask" fill="black">
<rect fill="white" width="600" height="800"/>
<polygon id="right" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
<polygon id="left" points="34 537,150 536,289 130,314 53,196 51"/>
<rect id="rect1" x="120" y="320" stroke-miterlimit="10" width="270" height="120"/>
</mask>
<rect fill="white" width="600" height="800" mask="url(#mask)"/>
</svg>

Answer 3

SVG solution
Rotation and appearance animation
.container {
width:35%;
height:35%;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800">
<g fill="black" fill-opacity="0" >
<polygon
id="left" transform="rotate(72 306 200)" points="34 537,150 536,289 130,314 53,196 51">
<animateTransform
attributeName="transform"
type="rotate"
values="72 306 200;0 306 200"
begin="svg1.click"
dur="0.5s"
fill="freeze" />
<animate
id="an_op1"
attributeName="fill-opacity"
from="0"
to="1"
begin="svg1.click"
dur="0.5s"
fill="freeze" />
</polygon>
<polygon id="right" transform="rotate(-69 457.5 200)"
points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55">
<animateTransform
attributeName="transform"
type="rotate"
values="-69 457.5 200;0 457.5 200"
begin="an_op1.end"
dur="0.5s"
fill="freeze" />
<animate
id="an_op2"
attributeName="fill-opacity"
from="0"
to="1"
begin="an_op1.end"
dur="0.5s"
fill="freeze" />
</polygon>
<rect id="rect1" x="800" y="320" width="270" height="120">
<animate
attributeName="x"
from="800"
to="120"
begin="an_op2.end"
dur="0.5s"
fill="freeze" />
<animate
id="an_op3"
attributeName="fill-opacity"
from="0"
to="1"
begin="an_op2.end"
dur="0.5s"
fill="freeze" />
</rect>
</g>
<text x="0" y="80" font-size="50" fill="purple">Click me</text>
</svg>
</div>
Second solution
All animation elements are invisible at the beginning. fill-opacity="0"
Item appearance Animation:
<animate
id="an_left"
attributeName="fill-opacity"
begin="1s"
from="0"
to="1"
dur="0.3s"
fill="freeze"/>
Below is the full code:
.container {
width:35%;
height:35%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800">
<polygon id="right" fill="#008080" fill-opacity="0"
points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55">
<animate
id="an_right"
attributeName="fill-opacity"
begin="an_left.end"
from="0"
to="1"
dur="0.3s"
fill="freeze"/>
</polygon>
<polygon id="left" fill="#008080" fill-opacity="0" points="34 537,150 536,289 130,314 53,196 51">
<animate
id="an_left"
attributeName="fill-opacity"
begin="0.2s"
from="0"
to="1"
dur="0.3s"
fill="freeze"/>
</polygon>
<rect x="120" y="320" fill="#008080" fill-opacity="0" stroke-miterlimit="10" width="270" height="120">
<animate
id="an_rect"
attributeName="fill-opacity"
from="0"
to="1"
begin="an_right.end"
dur="0.3s"
fill="freeze"/>
</rect>
</svg>
</div>
The sequence of animations is achieved by a chain of conditions in the attribute - begin="an_left.end"
Such a record means that the animation of the right rectangle will begin only after the end of the animation of the left polygon.
CSS solution
.container {
width:35%;
height:35%;
}
#left,#right, #rect1 {
fill-opacity:0;
fill:#008080;
}
#left {
animation:anLeft 0.3s ease forwards;
animation-delay: 0.1s;
}
#keyframes anLeft {
100% {
fill-opacity:1;
}
}
#right {
animation:anRight 0.3s ease forwards;
animation-delay: 0.4s;
}
#keyframes anRight {
100% {
fill-opacity:1;
}
}
#rect1 {
animation:anRect 0.3s ease forwards;
animation-delay:0.7s;
}
#keyframes anRect {
100% {
fill-opacity:1;
}
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800">
<polygon id="right"
points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
<polygon id="left" points="34 537,150 536,289 130,314 53,196 51"/>
<rect id="rect1" x="120" y="320" stroke-miterlimit="10" width="270" height="120"/>
</svg>
</div>

Answer 4

I solved this using CSS keyframes, is this what you're looking for?
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#right {
animation-delay: 1s;
}
#center {
animation-delay: 2s;
}
.shape {
opacity: 0;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: fade;
animation-duration: 1s;
}
<svg id="abcdef" height="600" width="800">
<polygon class="shape" points="34 537,150 536,289 130,314 53,196 51"/>
<polygon id="right" class="shape" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
<rect id="center" class="shape" x="120" y="320" filter="#008080" stroke-miterlimit="10" width="270" height="120"/>
</svg>
If you want to tweak the duration of the animation you have to look at changing the values of animation-delay and animation-duration.

Answer 5

Here an example with pure javascript and changing opacity by delta time
let left = document.querySelector('#left')
let right = document.querySelector('#right')
let rect1 = document.querySelector('#rect1')
let time = 3000; // animation time
let delay = 1000; // animation delay
// dt - time from animation start
function animate(dt) {
let v = dt - delay;
opacity(left, v/time*3);
opacity(right, v/time*3 - 1);
opacity(rect1, v/time*3 - 2);
dt < time + delay + 50 && requestAnimationFrame(animate)
}
function opacity(el, v) {
v = Math.min(1, Math.max(v, 0)); // clamp to 0-1
el.setAttribute('opacity', v)
}
requestAnimationFrame(animate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="175" viewBox="0 0 600 800">
<g fill="#008080">
<polygon id="right" opacity="0" points="411 537,528 537,364 118,354 91,348 72,341 53,327 53,223 55"/>
<polygon id="left" opacity="0" points="34 537,150 536,289 130,314 53,196 51"/>
<rect id="rect1" opacity="0" x="120" y="320" stroke-miterlimit="10" width="270" height="120"/>
</g>
</svg>

Answer 6

You can indeed use keyframes, in there there a lot of things to do besides just the opacity. You can animate drawing the outlines with stroke-dashoffset and stroke-dasharray. There are also ways to let them fade in from let and right with translateX or translateY. Also rotation animations.
take a look at the css in the pen i made: https://codepen.io/YilmazTut/pen/JzaQEy .
there also is a series on svg's from css tricks: https://css-tricks.com/lodge/svg/
i used that to create the logo in my pen. from about tutorial 16 he explains how animations and later on also pathdrawing works. I hope you can find your way there!