htmlcsstext
how to make dotted particle-like text with pure css
how do you make text like this
sort of like particle dotted text
also pure css please without three.js
i tried adding an image of dots over text but that also didn't work
first reason being you can't hide overflow with text
second reason it didn't give the same feeling
is there any way to achieve this without three.js and without photo editing?
here is the code of what i tried
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&family=Noto+Sans+JP&family=Playfair+Display&family=Red+Hat+Display&family=Red+Hat+Text&display=swap');
body {
margin: 0;
background: black;
overflow: hidden;
color: white;
}
.aurorae {
font-family: 'Red Hat Display', serif;
font-size: 15vw;
z-index: 1;
color: #444;
overflow: hidden;
}
.aurorae span {
position: absolute;
left: 11vw
}
#a1 {
top: -5vh;
left: -16vw;
}
.warp__0a1 {
transform-origin: 50% 50%;
transform: translate(9vw,0vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9775848874019741);
}
.warp__1a1 {
transform-origin: 50% 50%;
transform: translate(22vw,-1vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9918541177811926);
}
.warp__2a1 {
transform-origin: 50% 50%;
transform: translate(36vw,-3vh) rotate(-0.031557rad) skewX(-0.061557rad) scaleY(0.9981059660717526);
}
.warp__3a1 {
transform-origin: 50% 50%;
transform: translate(48vw, -3.5vh) rotate(-0.01759rad) skewX(-0.00759rad) scaleY(0.9999711960882787);
}
.warp__4a1 {
transform-origin: 50% 50%;
transform: translate(64vw,-3vh) rotate(0.08315rad) skewX(0.06315rad) scaleY(0.9980067013088312);
}
.warp__5a1 {
transform-origin: 50% 50%;
transform: translate(77vw,-1vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9904640541084487);
}
.warp__6a1 {
transform-origin: 50% 50%;
transform: translate(90vw,-0.5vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.975184600127323);
}
#a2 {
top: -30vh;
left: -18vw
}
.warp__0a2 {
transform-origin: 50% 50%;
transform: translate(10vw,50vh) rotate(-0.057726rad) skewX(-0.057726rad) scaleY(0.9726552656020944);
}
.warp__1a2 {
transform-origin: 50% 50%;
transform: translate(24vw,49vh) rotate(-0.067726rad) skewX(0.027726rad) scaleY(0.9800647897775718);
}
.warp__2a2 {
transform-origin: 50% 50%;
transform: translate(38vw,48vh) rotate(-0.116788rad) skewX(-0.116788rad) scaleY(0.9931880294313613);
}
.warp__3a2 {
transform-origin: 50% 50%;
transform: translate(50vw,47.75vh) rotate(-0.015825rad) skewX(-0.015825rad) scaleY(0.999874787300624);
}
.warp__4a2 {
transform-origin: 50% 50%;
transform: translate(64vw,48vh) rotate(0.104798rad) skewX(0.104798rad) scaleY(0.9945137135068197);
}
.warp__5a2 {
transform-origin: 50% 50%;
transform: translate(78vw,49vh) rotate(0.067726rad) skewX(-0.027726rad) scaleY(0.9755545052568039);
}
.warp__6a2 {
transform-origin: 50% 50%;
transform: translate(92vw,50vh) rotate(0.057726rad) skewX(0.057726rad) scaleY(0.9613238773849044);
}
#a3 {
top: -50vh;
left: -18vw
}
.warp__0a3 {
transform-origin: 50% 50%;
transform: translate(10vw,92vh) rotate(0.057726rad) skewX(0.057726rad) scaleY(0.9400157002866855);
}
.warp__1a3 {
transform-origin: 50% 50%;
transform: translate(23vw,94vh) rotate(0.007726rad) skewX(-0.027726rad) scaleY(0.9573195883848435);
}
.warp__2a3 {
transform-origin: 50% 50%;
transform: translate(38vw,95vh) rotate(0.116788rad) skewX(0.116788rad) scaleY(0.9883247148311696);
}
.warp__3a3 {
transform-origin: 50% 50%;
transform: translate(50vw,95.25vh) rotate(0.015825rad) skewX(0.015825rad) scaleY(0.9998639770658183);
}
.warp__4a3 {
transform-origin: 50% 50%;
transform: translate(65vw,95vh) rotate(-0.104798rad) skewX(-0.104798rad) scaleY(0.9877142377064163);
}
.warp__5a3 {
transform-origin: 50% 50%;
transform: translate(78vw,94vh) rotate(-0.067726rad) skewX(0.027726rad) scaleY(0.9589977165648023);
}
.warp__6a3 {
transform-origin: 50% 50%;
transform: translate(92vw,93vh) rotate(-0.057726rad) skewX(-0.057726rad) scaleY(0.9405674386786304);
}
#a4 {
top: -60vh;
left: -20vw;
}
.warp__0a4 {
transform-origin: 50% 50%;
transform: translate(12vw,127vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9030449674047885);
}
.warp__1a4 {
transform-origin: 50% 50%;
transform: translate(25vw,128vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9459833520291915);
}
.warp__2a4 {
transform-origin: 50% 50%;
transform: translate(40vw,129vh) rotate(0.031557rad) skewX(0.061557rad) scaleY(0.9889846515502553);
}
.warp__3a4{
transform-origin: 50% 50%;
transform: translate(52vw,129.25vh) rotate(0.01759rad) skewX(0.00759rad) scaleY(0.9999856191499683);
}
.warp__4a4 {
transform-origin: 50% 50%;
transform: translate(67vw,129vh) rotate(-0.08315rad) skewX(-0.06315rad) scaleY(0.9903675099397263);
}
.warp__5a4 {
transform-origin: 50% 50%;
transform: translate(81vw,128vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9488212582678166);
}
.warp__6a4 {
transform-origin: 50% 50%;
transform: translate(94vw,127vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9164114466423967);
}
.img {
background-image: url(dots.png);
width: 100vw;
height: 100vh;
position:absolute;
z-index: 2;
background-size: 1%
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class="aurorae">
<span id="a1">
<span class = "warp__0a1">A</span>
<span class="warp__1a1">U</span>
<span class="warp__2a1">R</span>
<span class="warp__3a1">O</span>
<span class="warp__4a1">R</span>
<span class="warp__5a1">A</span>
<span class="warp__6a1">E</span>
</span>
<span id="a2">
<span class = "warp__0a2">A</span>
<span class="warp__1a2">U</span>
<span class="warp__2a2">R</span>
<span class="warp__3a2">O</span>
<span class="warp__4a2">R</span>
<span class="warp__5a2">A</span>
<span class="warp__6a2">E</span>
</span>
<span id="a3">
<span class = "warp__0a3">A</span>
<span class="warp__1a3">U</span>
<span class="warp__2a3">R</span>
<span class="warp__3a3">O</span>
<span class="warp__4a3">R</span>
<span class="warp__5a3">A</span>
<span class="warp__6a3">E</span>
</span>
<span id="a4">
<span class = "warp__0a4">A</span>
<span class="warp__1a4">U</span>
<span class="warp__2a4">R</span>
<span class="warp__3a4">O</span>
<span class="warp__4a4">R</span>
<span class="warp__5a4">A</span>
<span class="warp__6a4">E</span></span>
<div class = "img"></div>
</div>
</body>
</html>here is the image that i used
here is what i got
AFTER BACKGROUND-CLIP
after using background-clip, it still doesn't work
this is the new code
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&family=Noto+Sans+JP&family=Playfair+Display&family=Red+Hat+Display&family=Red+Hat+Text&display=swap');
body {
margin: 0;
background: black;
overflow: hidden;
color: white;
}
.aurorae {
font-family: 'Red Hat Display', serif;
font-size: 15vw;
z-index: 1;
color: transparent;
-webkit-text-fill-color: transparent;
overflow: hidden;
}
.aurorae span {
position: absolute;
left: 11vw
}
#a1 {
top: -5vh;
left: -16vw;
}
.warp__0a1 {
transform-origin: 50% 50%;
transform: translate(9vw,0vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9775848874019741);
}
.warp__1a1 {
transform-origin: 50% 50%;
transform: translate(22vw,-1vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9918541177811926);
}
.warp__2a1 {
transform-origin: 50% 50%;
transform: translate(36vw,-3vh) rotate(-0.031557rad) skewX(-0.061557rad) scaleY(0.9981059660717526);
}
.warp__3a1 {
transform-origin: 50% 50%;
transform: translate(48vw, -3.5vh) rotate(-0.01759rad) skewX(-0.00759rad) scaleY(0.9999711960882787);
}
.warp__4a1 {
transform-origin: 50% 50%;
transform: translate(64vw,-3vh) rotate(0.08315rad) skewX(0.06315rad) scaleY(0.9980067013088312);
}
.warp__5a1 {
transform-origin: 50% 50%;
transform: translate(77vw,-1vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9904640541084487);
}
.warp__6a1 {
transform-origin: 50% 50%;
transform: translate(90vw,-0.5vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.975184600127323);
}
#a2 {
top: -30vh;
left: -18vw
}
.warp__0a2 {
transform-origin: 50% 50%;
transform: translate(10vw,50vh) rotate(-0.057726rad) skewX(-0.057726rad) scaleY(0.9726552656020944);
}
.warp__1a2 {
transform-origin: 50% 50%;
transform: translate(24vw,49vh) rotate(-0.067726rad) skewX(0.027726rad) scaleY(0.9800647897775718);
}
.warp__2a2 {
transform-origin: 50% 50%;
transform: translate(38vw,48vh) rotate(-0.116788rad) skewX(-0.116788rad) scaleY(0.9931880294313613);
}
.warp__3a2 {
transform-origin: 50% 50%;
transform: translate(50vw,47.75vh) rotate(-0.015825rad) skewX(-0.015825rad) scaleY(0.999874787300624);
}
.warp__4a2 {
transform-origin: 50% 50%;
transform: translate(64vw,48vh) rotate(0.104798rad) skewX(0.104798rad) scaleY(0.9945137135068197);
}
.warp__5a2 {
transform-origin: 50% 50%;
transform: translate(78vw,49vh) rotate(0.067726rad) skewX(-0.027726rad) scaleY(0.9755545052568039);
}
.warp__6a2 {
transform-origin: 50% 50%;
transform: translate(92vw,50vh) rotate(0.057726rad) skewX(0.057726rad) scaleY(0.9613238773849044);
}
#a3 {
top: -50vh;
left: -18vw
}
.warp__0a3 {
transform-origin: 50% 50%;
transform: translate(10vw,92vh) rotate(0.057726rad) skewX(0.057726rad) scaleY(0.9400157002866855);
}
.warp__1a3 {
transform-origin: 50% 50%;
transform: translate(23vw,94vh) rotate(0.007726rad) skewX(-0.027726rad) scaleY(0.9573195883848435);
}
.warp__2a3 {
transform-origin: 50% 50%;
transform: translate(38vw,95vh) rotate(0.116788rad) skewX(0.116788rad) scaleY(0.9883247148311696);
}
.warp__3a3 {
transform-origin: 50% 50%;
transform: translate(50vw,95.25vh) rotate(0.015825rad) skewX(0.015825rad) scaleY(0.9998639770658183);
}
.warp__4a3 {
transform-origin: 50% 50%;
transform: translate(65vw,95vh) rotate(-0.104798rad) skewX(-0.104798rad) scaleY(0.9877142377064163);
}
.warp__5a3 {
transform-origin: 50% 50%;
transform: translate(78vw,94vh) rotate(-0.067726rad) skewX(0.027726rad) scaleY(0.9589977165648023);
}
.warp__6a3 {
transform-origin: 50% 50%;
transform: translate(92vw,93vh) rotate(-0.057726rad) skewX(-0.057726rad) scaleY(0.9405674386786304);
}
#a4 {
top: -60vh;
left: -20vw;
}
.warp__0a4 {
transform-origin: 50% 50%;
transform: translate(12vw,127vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9030449674047885);
}
.warp__1a4 {
transform-origin: 50% 50%;
transform: translate(25vw,128vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9459833520291915);
}
.warp__2a4 {
transform-origin: 50% 50%;
transform: translate(40vw,129vh) rotate(0.031557rad) skewX(0.061557rad) scaleY(0.9889846515502553);
}
.warp__3a4{
transform-origin: 50% 50%;
transform: translate(52vw,129.25vh) rotate(0.01759rad) skewX(0.00759rad) scaleY(0.9999856191499683);
}
.warp__4a4 {
transform-origin: 50% 50%;
transform: translate(67vw,129vh) rotate(-0.08315rad) skewX(-0.06315rad) scaleY(0.9903675099397263);
}
.warp__5a4 {
transform-origin: 50% 50%;
transform: translate(81vw,128vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9488212582678166);
}
.warp__6a4 {
transform-origin: 50% 50%;
transform: translate(94vw,127vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9164114466423967);
}
.img {
background-image: url(dots.png);
width: 100vw;
height: 100vh;
position:absolute;
z-index: 2;
background-size: 1%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "img">
<div class="aurorae">
<span id="a1">
<span class = "warp__0a1">A</span>
<span class="warp__1a1">U</span>
<span class="warp__2a1">R</span>
<span class="warp__3a1">O</span>
<span class="warp__4a1">R</span>
<span class="warp__5a1">A</span>
<span class="warp__6a1">E</span>
</span>
<span id="a2">
<span class = "warp__0a2">A</span>
<span class="warp__1a2">U</span>
<span class="warp__2a2">R</span>
<span class="warp__3a2">O</span>
<span class="warp__4a2">R</span>
<span class="warp__5a2">A</span>
<span class="warp__6a2">E</span>
</span>
<span id="a3">
<span class = "warp__0a3">A</span>
<span class="warp__1a3">U</span>
<span class="warp__2a3">R</span>
<span class="warp__3a3">O</span>
<span class="warp__4a3">R</span>
<span class="warp__5a3">A</span>
<span class="warp__6a3">E</span>
</span>
<span id="a4">
<span class = "warp__0a4">A</span>
<span class="warp__1a4">U</span>
<span class="warp__2a4">R</span>
<span class="warp__3a4">O</span>
<span class="warp__4a4">R</span>
<span class="warp__5a4">A</span>
<span class="warp__6a4">E</span></span>
</div>
</div>
</body>
</html>and this is what i get
the text is transparent
Solution
To get each character to clip the background you can put its background as the 'dots' rather than that background being in a separate div.
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&family=Noto+Sans+JP&family=Playfair+Display&family=Red+Hat+Display&family=Red+Hat+Text&display=swap');
body {
margin: 0;
background: black;
overflow: hidden;
color: white;
}
.aurorae {
font-family: 'Red Hat Display', serif;
font-size: 15vw;
z-index: 1;
color: transparent;
-webkit-text-fill-color: transparent;
overflow: hidden;
}
.aurorae span {
position: absolute;
left: 11vw;
background-image: url(https://i.sstatic.net/QVGCH.png);
-webkit-background-clip: text;
background-clip: text;
}
#a1 {
top: -5vh;
left: -16vw;
}
.warp__0a1 {
transform-origin: 50% 50%;
transform: translate(9vw, 0vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9775848874019741);
}
.warp__1a1 {
transform-origin: 50% 50%;
transform: translate(22vw, -1vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9918541177811926);
}
.warp__2a1 {
transform-origin: 50% 50%;
transform: translate(36vw, -3vh) rotate(-0.031557rad) skewX(-0.061557rad) scaleY(0.9981059660717526);
}
.warp__3a1 {
transform-origin: 50% 50%;
transform: translate(48vw, -3.5vh) rotate(-0.01759rad) skewX(-0.00759rad) scaleY(0.9999711960882787);
}
.warp__4a1 {
transform-origin: 50% 50%;
transform: translate(64vw, -3vh) rotate(0.08315rad) skewX(0.06315rad) scaleY(0.9980067013088312);
}
.warp__5a1 {
transform-origin: 50% 50%;
transform: translate(77vw, -1vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.9904640541084487);
}
.warp__6a1 {
transform-origin: 50% 50%;
transform: translate(90vw, -0.5vh) rotate(-0.027726rad) skewX(-0.027726rad) scaleY(0.975184600127323);
}
#a2 {
top: -30vh;
left: -18vw
}
.warp__0a2 {
transform-origin: 50% 50%;
transform: translate(10vw, 50vh) rotate(-0.057726rad) skewX(-0.057726rad) scaleY(0.9726552656020944);
}
.warp__1a2 {
transform-origin: 50% 50%;
transform: translate(24vw, 49vh) rotate(-0.067726rad) skewX(0.027726rad) scaleY(0.9800647897775718);
}
.warp__2a2 {
transform-origin: 50% 50%;
transform: translate(38vw, 48vh) rotate(-0.116788rad) skewX(-0.116788rad) scaleY(0.9931880294313613);
}
.warp__3a2 {
transform-origin: 50% 50%;
transform: translate(50vw, 47.75vh) rotate(-0.015825rad) skewX(-0.015825rad) scaleY(0.999874787300624);
}
.warp__4a2 {
transform-origin: 50% 50%;
transform: translate(64vw, 48vh) rotate(0.104798rad) skewX(0.104798rad) scaleY(0.9945137135068197);
}
.warp__5a2 {
transform-origin: 50% 50%;
transform: translate(78vw, 49vh) rotate(0.067726rad) skewX(-0.027726rad) scaleY(0.9755545052568039);
}
.warp__6a2 {
transform-origin: 50% 50%;
transform: translate(92vw, 50vh) rotate(0.057726rad) skewX(0.057726rad) scaleY(0.9613238773849044);
}
#a3 {
top: -50vh;
left: -18vw
}
.warp__0a3 {
transform-origin: 50% 50%;
transform: translate(10vw, 92vh) rotate(0.057726rad) skewX(0.057726rad) scaleY(0.9400157002866855);
}
.warp__1a3 {
transform-origin: 50% 50%;
transform: translate(23vw, 94vh) rotate(0.007726rad) skewX(-0.027726rad) scaleY(0.9573195883848435);
}
.warp__2a3 {
transform-origin: 50% 50%;
transform: translate(38vw, 95vh) rotate(0.116788rad) skewX(0.116788rad) scaleY(0.9883247148311696);
}
.warp__3a3 {
transform-origin: 50% 50%;
transform: translate(50vw, 95.25vh) rotate(0.015825rad) skewX(0.015825rad) scaleY(0.9998639770658183);
}
.warp__4a3 {
transform-origin: 50% 50%;
transform: translate(65vw, 95vh) rotate(-0.104798rad) skewX(-0.104798rad) scaleY(0.9877142377064163);
}
.warp__5a3 {
transform-origin: 50% 50%;
transform: translate(78vw, 94vh) rotate(-0.067726rad) skewX(0.027726rad) scaleY(0.9589977165648023);
}
.warp__6a3 {
transform-origin: 50% 50%;
transform: translate(92vw, 93vh) rotate(-0.057726rad) skewX(-0.057726rad) scaleY(0.9405674386786304);
}
#a4 {
top: -60vh;
left: -20vw;
}
.warp__0a4 {
transform-origin: 50% 50%;
transform: translate(12vw, 127vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9030449674047885);
}
.warp__1a4 {
transform-origin: 50% 50%;
transform: translate(25vw, 128vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9459833520291915);
}
.warp__2a4 {
transform-origin: 50% 50%;
transform: translate(40vw, 129vh) rotate(0.031557rad) skewX(0.061557rad) scaleY(0.9889846515502553);
}
.warp__3a4 {
transform-origin: 50% 50%;
transform: translate(52vw, 129.25vh) rotate(0.01759rad) skewX(0.00759rad) scaleY(0.9999856191499683);
}
.warp__4a4 {
transform-origin: 50% 50%;
transform: translate(67vw, 129vh) rotate(-0.08315rad) skewX(-0.06315rad) scaleY(0.9903675099397263);
}
.warp__5a4 {
transform-origin: 50% 50%;
transform: translate(81vw, 128vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9488212582678166);
}
.warp__6a4 {
transform-origin: 50% 50%;
transform: translate(94vw, 127vh) rotate(0.027726rad) skewX(0.027726rad) scaleY(0.9164114466423967);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="aurorae"><span id="a1"><span class="warp__0a1">A</span><span class="warp__1a1">U</span><span class="warp__2a1">R</span><span class="warp__3a1">O</span><span class="warp__4a1">R</span><span class="warp__5a1">A</span><span class="warp__6a1">E</span></span>
<span id="a2"><span class="warp__0a2">A</span><span class="warp__1a2">U</span><span class="warp__2a2">R</span><span class="warp__3a2">O</span><span class="warp__4a2">R</span><span class="warp__5a2">A</span><span class="warp__6a2">E</span></span>
<span
id="a3"><span class="warp__0a3">A</span>
<span class="warp__1a3">U</span><span class="warp__2a3">R</span><span class="warp__3a3">O</span><span class="warp__4a3">R</span><span class="warp__5a3">A</span><span class="warp__6a3">E</span></span><span id="a4"><span class="warp__0a4">A</span>
<span
class="warp__1a4">U</span>
<span class="warp__2a4">R</span><span class="warp__3a4">O</span><span class="warp__4a4">R</span><span class="warp__5a4">A</span><span class="warp__6a4">E</span></span>
</div>
</body>
</html>