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);
}
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 |
Web Animation Test | 2,721 Kb |
Text Effect - Optimist | 3,467 Kb |
HAL9000 | 3,056 Kb |
Incremental Delaunay Triangulation Demo | 8,204 Kb |
Text Effect - Radius | 3,762 Kb |
Shader Template | 3,345 Kb |
Vector Star Eye | 1,788 Kb |
Tesselation Transition | 6,273 Kb |
Bluemix Logo Scratch Animation | 5,976 Kb |
Text Effect - Mystique | 3,405 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 |
Text Looping Transition | Agelber | 5,619 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 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!