Text Effect - Mystique

Developer
Chris Johnson
Size
3,405 Kb
Views
28,336
  1. Text Effect - Mystique Previews
  2. Text Effect - Mystique HTML Codes
  3. Text Effect - Mystique CSS Codes

How do I make an text effect - mystique?

Experimenting with text effects in SVG. This turned out to be a sort of moving neon gradient outline thing.. What is a text effect - mystique? How do you make a text effect - mystique? This script and codes were developed by Chris Johnson on 01 October 2022, Saturday.

Text Effect - Mystique Previews
IQ Test

Text Effect - Mystique - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Effect - Mystique</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="specialtext" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 750 200" preserveAspectRatio="xMidYMid meet" style="height:70%;width:70%"> <defs> <filter id="texteffect"> <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur> <feComponentTransfer> <feFuncA type="linear" slope="1.5" intercept="0"></feFuncA> </feComponentTransfer> <feComposite result="outer" in2="SourceGraphic" operator="out"></feComposite> <feGaussianBlur result="pre-inner" in="SourceGraphic" stdDeviation="2"></feGaussianBlur> <feComposite in="SourceGraphic" in2="pre-inner" operator="out"></feComposite> <feComponentTransfer result="inner"> <feFuncA type="linear" slope="7.5" intercept="0"></feFuncA> </feComponentTransfer> <feMerge> <feMergeNode in="outer"></feMergeNode> <feMergeNode in="inner"></feMergeNode> </feMerge> <feGaussianBlur stdDeviation="1"></feGaussianBlur> </filter> <linearGradient id="gradient" color-interpolation="sRGB" spreadMethod="repeat" x1="0" x2="0.5" y1="0.02" y2="0"> <stop stop-color="#ef50d5" offset="0%"></stop> <stop stop-color="#15f0f2" offset="33%"></stop> <stop stop-color="#f2a415" offset="66%"></stop> <stop stop-color="#ef50d5" offset="100%"></stop> </linearGradient> <mask id="textMask"> <g filter="url(#texteffect)"> <rect x="10" y="20" width="730" height="10" fill="#fff"></rect> <rect x="10" y="170" width="730" height="10" fill="#fff"></rect> <text id="text" x="375" y="150" text-anchor="middle" fill="#fff">MYSTIQUE</text> </g> </mask> </defs> <rect id="fill" mask="url(#textMask)" fill="url(#gradient)" x="0" y="0" width="4000" height="200"></rect>
</svg>
</body>
</html>

Text Effect - Mystique - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Righteous";
html, body { width: 100%; height: 100%; overflow: hidden; background: #131313;
}
.specialtext { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#text { font-size: 150px; font-family: Righteous; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
#fill { -webkit-animation: shift 5s linear infinite; animation: shift 5s linear infinite;
}
@-webkit-keyframes shift { 0% { x: 0; } 100% { x: -2000; }
}
@keyframes shift { 0% { x: 0; } 100% { x: -2000; }
}
Text Effect - Mystique - Script Codes
Text Effect - Mystique - Script Codes
Home Page Home
Developer Chris Johnson
Username jhnsnc
Uploaded October 01, 2022
Rating 4.5
Size 3,405 Kb
Views 28,336
Do you need developer help for Text Effect - Mystique?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Johnson (jhnsnc) Script Codes
Name
Tesselation Transition
F Loader
HAL9000
Text Effect - Optimist
Text Effect - Radius
Shader Template
Headlander Title Animation
Web Animation Test
Incremental Delaunay Triangulation Demo
Colorized Perlin Noise Generator
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!