Text Effect - Optimist
How do I make an text effect - optimist?
Another SVG text effect experiment. With this one, I tried to make something interesting with use of perspective and text paths.. What is a text effect - optimist? How do you make a text effect - optimist? This script and codes were developed by Chris Johnson on 01 October 2022, Saturday.
Text Effect - Optimist - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Effect - Optimist</title> <link href="https://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet"> <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="texteffect" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 850 550" preserveAspectRatio="xMidYMid meet" style="height:80%;width:80%"> <defs> <linearGradient id="txtGrad" color-interpolation="sRGB" spreadMethod="pad" x1="1" y1="-0.2" x2="0.9" y2="1.2"> <stop stop-color="#8E24AA" offset="0%"></stop> <stop stop-color="#EC407A" offset="50%"></stop> <stop stop-color="#FFF59D" offset="100%"></stop> </linearGradient> <filter id="txtFilt" color-interpolation-filters="sRGB"> <feGaussianBlur in="SourceGraphic" stdDeviation="40"></feGaussianBlur> <feColorMatrix result="blur" type="matrix" values="0.9 0 0 1 0 0 0.9 0 0.9297 0 0 0 0.9 0.3438 0 0 0 0 0.6 0"></feColorMatrix> <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur> <feColorMatrix result="outline" type="matrix" values="0 0 0 32 0 0 0 0 32 0 0 0 0 32 0 0 0 0 16 0"></feColorMatrix> <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur> <feOffset dx="4" dy="4"></feOffset> <feColorMatrix result="dropshadow" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 16 0"></feColorMatrix> <feMerge> <feMergeNode in="blur"></feMergeNode> <feMergeNode in="dropshadow"></feMergeNode> <feMergeNode in="outline"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <path id="txtCurve" d="M60,220C240,150,560,125,740,195M120,360C260,290,550,270,730,315M170,460C340,390,540,420,720,490" fill="none" stroke="red"></path> </defs> <text id="text" x="0" y="0" font-family="Yellowtail" font-size="150" fill="url(#txtGrad)" filter="url(#txtFilt)"> <textPath xlink:href="#txtCurve"> <tspan>Remember to take care of yourself</tspan> <tspan dx="-30" font-size="300">!</tspan> </textPath> </text>
</svg>
</body>
</html>
Text Effect - Optimist - Script Codes CSS Codes
html, body { width: 100%; height: 100%;
}
body { overflow: hidden; background: #131313; -webkit-perspective: 1000px; perspective: 1000px;
}
.texteffect { position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, -100px) scaleY(0.8) rotateX(7deg) rotateY(-30deg); transform: translate3d(-50%, -50%, -100px) scaleY(0.8) rotateX(7deg) rotateY(-30deg);
}
![Text Effect - Optimist - Script Codes](http://shots.codepen.io/jhnsnc/pen/wJWNqB-512.jpg)
Developer | Chris Johnson |
Username | jhnsnc |
Uploaded | October 01, 2022 |
Rating | 4 |
Size | 3,467 Kb |
Views | 28,336 |
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!
Name | Size |
Shader Template | 3,345 Kb |
Colorized Perlin Noise Generator | 6,714 Kb |
Bluemix Logo Scratch Animation | 5,976 Kb |
F Loader | 1,981 Kb |
Headlander Title Animation | 11,702 Kb |
Web Animation Test | 2,721 Kb |
Vector Star Eye | 1,788 Kb |
Text Effect - Radius | 3,762 Kb |
HAL9000 | 3,056 Kb |
Text Effect - Optimist | 3,467 Kb |
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!
Name | Username | Size |
RSW | JordanC | 3,726 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Tooltip in table | Roine | 3,713 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!