Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
<section>
<div class="isolate">
<div class="noise">
<p>Happy</p>
<p>New Year</p>
<span>새해 복 많이 받으세요</span>
</div>
<div class="overlay"></div>
<div class="flower"></div>
<div class="by">By wfedev <a href="https://codepen.io/cjimmy/pen/zYzNBJj" target="_blank">fork Holographic type</a></div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap');
body {
display: flex; align-items: center; justify-content: center;
font-family: 'Nanum Myeongjo', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
height: 100vh;
/* background: #000; */
}
p, span { padding: 0; margin: 0; line-height: 100%; }
a { text-decoration: none; color: inherit; }
section {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 50em;
height: 30em;
animation-duration: 4s;
animation-name: cube-rotate;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
/* background: #fff; */
}
/* Isolation creates a new stacking context for mix-blend-mode. See: https://developer.mozilla.org/en-US/docs/Web/CSS/isolation */
.isolate {
isolation: isolate;
position: absolute;
top: 0;
width: 18em;
height: 27em;
text-align: center;
background: linear-gradient(
-135deg, #fff6fa, #d9a7ce47), url(https://grainy-gradients.vercel.app/noise.svg);
border-radius: 16px;
box-shadow: -5px 5px 5px #eee;
}
.noise {
position: absolute;
top: 0;
width: 18em;
height: 27em;
text-align: center;
padding-top: 200px;
background: linear-gradient(24deg, rgba(255 10 10/25%), #fcccdf), url("data:image/svg+xml,%3Csvg viewBox='0 0 400 310' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation-duration: 2s;
animation-name: shimmer;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.isolate .noise p { font-size: 3.5rem; }
.isolate .noise span { font-size: 1.5rem; line-height: 200%; }
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: #fbe6ef;
mix-blend-mode: multiply;
border-radius: 16px;
}
.flower {
width: 12em;
height: 24em;
position: absolute;
left: 50px;
top: 20px;
mix-blend-mode: color-burn;
background: url("https://secure.img1-fg.wfcdn.com/im/14067021/resize-h800-w800%5Ecompr-r85/1085/108596652/Elegant+Tiger+Lilies+Stems.jpg");
background-size: cover;
background-repeat: repeat;
background-position: center;
}
.by {
display: flex; flex-direction: column; align-items: flex-end;
position: absolute;
bottom: -40px; right: 4px;
color: #e9cade;
}
.by a {font-size: .75rem;}
@keyframes cube-rotate {
0% { transform: perspective(600px) rotate3d(0.6, 0.05, 0.2, 0deg); }
50% { transform: perspective(400px) rotate3d(0.6, 5.05, -2.2, 10deg); }
100% { transform: perspective(600px) rotate3d(0.6, 0.05, 0.2, 0deg); }
}
@keyframes shimmer {
from { filter: contrast(230%) brightness(180%); }
to { filter: contrast(190%) brightness(105%); }
}
/* Special case Chrome. mix-blend-mode is treated differently. Works best in Safari! */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.overlay { opacity: 0.6; }
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
