Text Effect - Optimist

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

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 Previews
IQ Test

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
Text Effect - Optimist - Script Codes
Home Page Home
Developer Chris Johnson
Username jhnsnc
Uploaded October 01, 2022
Rating 4
Size 3,467 Kb
Views 28,336
Do you need developer help for Text Effect - Optimist?

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
Wobbly Star
Text Effect - Radius
Text Effect - Mystique
Colorized Perlin Noise Generator
Vector Star Eye
Web Animation Test
Incremental Delaunay Triangulation Demo
HAL9000
Headlander Title Animation
Bluemix Logo Scratch Animation
Create amazing Facebook ads 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!