#fg {
fill: url(#ship);
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
@keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#bg {
fill: white;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
@keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
@-webkit-keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
#home {
height: 100vh;
background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<clipPath id="ship">
<use xlink:href="#shape" id="bg" />
</clipPath>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" />
</defs>
<image xlink:href="http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"
width="1376" height="764" preserveAspectRatio="xMidYMid slice" clip-path="url(#ship)" />
<use xlink:href="#shape" id="fg" />
</svg>
</div>
I am trying to create a page load animation, first the white line gets drawn and afterwards I want to fill the screen with a white SVG animation, I got everything to work but I do not like the sharp edge for the fill effect, how can I change the shape of the corner to the shape of the white line? please see the animation in action to get a better understanding
Just use your original path shape and grow (scale) that.
For the following example, I removed the unnecessary elements you were using, and modified the main shape slightly so that it had a bottom right corner (instead of just being the line), so I could fill it.
I put one copy in front (id="fg"), with a dash animation as you requested in a previous question. And behind it, I put a copy of the path (id="bg") with a white fill. Then when the dash animation finishes, I start a second animation that scales the white version of the shape up by 4x to fill the SVG.
#fg {
fill: pink;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
@keyframes dash {
from { stroke-dashoffset: 1024px; }
to { stroke-dashoffset: 0px; }
}
@-webkit-keyframes dash {
from { stroke-dashoffset: 1024px; }
to { stroke-dashoffset: 0px; }
}
#bg {
fill: white;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
@keyframes bgfill {
from { transform: scale(1); }
to { transform: scale(4); }
}
@-webkit-keyframes bgfill {
from { transform: scale(1); }
to { transform: scale(4); }
}
<div id="home" class="section" style="height:100vh;background:pink;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z"/>
</defs>
<use xlink:href="#shape" id="bg"/>
<use xlink:href="#shape" id="fg"/>
</svg>
</div>
</div>
Update
To have the background fill with an image, the simplest approach is probably by using a clip path.
#fg {
fill: pink;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1028px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
@keyframes dash {
from { stroke-dashoffset: 1028px; }
to { stroke-dashoffset: 0px; }
}
@-webkit-keyframes dash {
from { stroke-dashoffset: 1028px; }
to { stroke-dashoffset: 0px; }
}
#bg {
fill: url(#kitten);
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
@keyframes bgfill {
from { transform: scale(1); }
to { transform: scale(4); }
}
@-webkit-keyframes bgfill {
from { transform: scale(1); }
to { transform: scale(4); }
}
<div id="home" class="section" style="height:100vh;background:pink;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z"/>
<clipPath id="kitten">
<use xlink:href="#shape" id="bg"/>
</clipPath>
</defs>
<image xlink:href="https://placekitten.com/700/350" width="1376" height="764" preserveAspectRatio="xMidYMid slice" clip-path="url(#kitten)"/>
<use xlink:href="#shape" id="fg"/>
</svg>
</div>
</div>
