<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
property
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0"
/>
<
title
>GeeksforGeeks</
title
>
</
head
>
<
style
>
@keyframes animation1 {
from {
width: 4px;
height: 4px;
}
to {
width: 150px;
height: 150px;
}
}
rect {
animation: animation1 10s ease-in-out;
}
</
style
>
<
body
>
<
div
style
=
"width: 300px; height: 300px;"
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h2
>
SVG | <
clipPath
> element
</
h2
>
</
center
>
<
svg
width
=
"500"
height
=
"500"
transform
=
"translate(100, 0)"
>
<
clipPath
id
=
"gfg"
>
<
rect
width
=
"4"
height
=
"4"
></
rect
>
</
clipPath
>
<
path
id
=
"path"
d="M10, 30 A20, 20, 0, 0,
1, 50, 30 A20, 20, 0, 0, 1,
90, 30 Q90, 60, 50, 90 Q10,
60, 10, 30 Z" />
<
use
fill
=
"green"
clip-path
=
"url(#gfg)"
href
=
"#path"
/>
</
svg
>
</
div
>
</
body
>
</
html
>