lab/website-components
1
Fork 0
Code Activity

Simple attempt at a social image

Browse source
This commit is contained in:
Jake Howard 2024-12-07 01:09:22 +00:00
parent 529c866547
commit 4b7b964445
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/social-image/index.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="./index.svg" />
</body>
</html>

22
src/social-image/index.svg Normal file
View file

@ -0,0 +1,22 @@
<svg width="1280" height="720" xmlns="http://www.w3.org/2000/svg">
<style>
.info-box {
fill: rgba(0, 0, 0, 0.5);
}
.title {
white-space: break-spaces;
fill: white;
font-size: 56px;
text-anchor: start;
dominant-baseline: text-after-edge;
}
</style>
<image
href="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?q=80&amp;w=1974&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
width="1280"
height="720"
preserveAspectRatio="xMidYMid slice"
/>
<rect y="360" width="1280" height="360" class="info-box"/>
<text y="540" class="title"><tspan x="20">The very long title which</tspan><tspan x="20" dy="56">is too long to fit.</tspan></text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 793 B