html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<svg width="300" height="300">
<defs> <pattern id="img" patternUnits="userSpaceOnUse" width="300" height="400"> <image xlink:href="https://cdnb.artstation.com/p/assets/images/images/004/241/757/large/shane-molina-r2d2-socialmedia.jpg" x="0" y="0" width="300" height="430" /> </pattern> </defs>
<circle cx="150" cy="150" r="150" fill="url(#img)"></circle>
</svg>
<svg width="300" height="300">
<defs> <pattern id="img" patternUnits="userSpaceOnUse" width="300" height="400"> <image xlink:href="https://cdnb.artstation.com/p/assets/images/images/004/241/757/large/shane-molina-r2d2-socialmedia.jpg" x="0" y="0" width="300" height="400" /> </pattern> </defs>
<ellipse cx="150" cy="150" rx="150" ry="120" fill="url(#img)"></ellipse>
</svg>
<svg height="210" width="400">
<defs> <pattern id="img" patternUnits="userSpaceOnUse" width="300" height="400"> <image xlink:href="https://cdnb.artstation.com/p/assets/images/images/004/241/757/large/shane-molina-r2d2-socialmedia.jpg" x="0" y="0" width="300" height="400" /> </pattern> </defs>
<path d="M130 0 L0 200 L300 200 Z" fill="url(#img)" />
</svg>
<svg height="210" width="500">
<defs> <pattern id="img" patternUnits="userSpaceOnUse"> <image xlink:href="https://cdnb.artstation.com/p/assets/images/images/004/241/757/large/shane-molina-r2d2-socialmedia.jpg" /> </pattern> </defs>
<polygon points="100,10 40,198 190,78 10,78 160,198"
fill="url(#img)" />
</svg>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run