Skip to content

Instantly share code, notes, and snippets.

@omrilotan

omrilotan/hello-world.svg

Last active October 6, 2022 00:36
Show Gist options
  • Save omrilotan/c032da8e059258e0f9ce4ca271881fad to your computer and use it in GitHub Desktop.
Save omrilotan/c032da8e059258e0f9ce4ca271881fad to your computer and use it in GitHub Desktop.
Download ZIP
Rick HTML in SVG
Display the source blob
Display the rendered blob
Raw
hello-world.svg
<svg fill="none" viewBox="0 0 120 120" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<style>
@keyframes bounce {
0% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
3% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
5% { transform: scale(1.1, .9) translateY(5px) skew(0deg, 0deg); }
12% { transform: scale(.9, 1.1) translateY(-70px) skew(25deg, 5deg); }
13% { transform: scale(.9, 1.1) translateY(-70px) skew(25deg, 5deg); }
20% { transform: scale(1.05, .95) translateY(0) skew(0deg, 0deg); }
22% { transform: scale(1, 1) translateY(-7px) skew(0deg, 0deg); }
27% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
100% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
}
h1 {
width: 120px;
line-height: 20px;
padding-top: 70px;
text-align: center;
font: 400 16px/1.5 Helvetica ,Arial ,sans-serif;
color: rgb(52, 73, 94);
transform-origin: bottom;
animation: 4s cubic-bezier(.5, 0, .5, 1.2) 1s infinite bounce;
}
</style>
<h1>Hello, world</h1>
</div>
</foreignObject>
</svg>
Raw
hello-world.xml
<svg fill="none" viewBox="0 0 120 120" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<style>
@keyframes bounce {
0% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
3% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
5% { transform: scale(1.1, .9) translateY(5px) skew(0deg, 0deg); }
12% { transform: scale(.9, 1.1) translateY(-70px) skew(25deg, 5deg); }
13% { transform: scale(.9, 1.1) translateY(-70px) skew(25deg, 5deg); }
20% { transform: scale(1.05, .95) translateY(0) skew(0deg, 0deg); }
22% { transform: scale(1, 1) translateY(-7px) skew(0deg, 0deg); }
27% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
100% { transform: scale(1, 1) translateY(0) skew(0deg, 0deg); }
}
h1 {
width: 120px;
line-height: 20px;
padding-top: 70px;
text-align: center;
font: 400 16px/1.5 Helvetica ,Arial ,sans-serif;
color: rgb(52, 73, 94);
transform-origin: bottom;
animation: 4s cubic-bezier(.5, 0, .5, 1.2) 1s infinite bounce;
}
</style>
<h1>Hello, world</h1>
</div>
</foreignObject>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment