Typography SVG experiment

Developer
Chris Wright
Size
3,472 Kb
Views
48,576
  1. Typography SVG experiment Previews
  2. Typography SVG experiment HTML Codes
  3. Typography SVG experiment CSS Codes
  4. Typography SVG experiment JS Codes

How do I make an typography svg experiment?

SVG curve and css text-shadowingThe Curve in the type looks correct in IE(9+), webkit, blink but in firefox it follows the path in a strange way, looking almost triangular.. What is a typography svg experiment? How do you make a typography svg experiment? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

Typography SVG experiment Previews
IQ Test

Typography SVG experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typography SVG experiment</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="m-type-treatment">
<svg class="m-type-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	viewBox="0 0 320.1 049.4" xml:space="preserve">
<path id="curve" style="fill:none;" d="M94.2,45.5c0,0,26.4-15.5,61.6-15.5s60.6,15.5,60.6,15.5"/>
<text> <textPath startOffset="5%" class="m-type-curved" xlink:href="#curve">
LOCAL'S</textPath>
</text>
</svg> <span class="m-type-offset-shadow">Corner</span>
</h1> <script src='https://dl.dropboxusercontent.com/u/1358745/scripts/circletype.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Typography SVG experiment - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Graduate);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
body { background: #333; background: url("https://unsplash.imgix.net/reserve/6TjIJK0uSJWtQUZuQWMW_58400023.jpg?q=75&fm=jpg&auto=format&s=243164aa8156f27dd1be354f592c2e57"); font-size: 100%; background-size: 100%; line-height: 1.5;
}
.m-type-svg { display: block; max-width: 100%;
}
.m-type-treatment { max-width: 700px; margin: 2em auto;
}
.m-type-curved { display: block; font-family: "Lato"; font-weight: 700; font-size: 1.84em; color: #dbd5c5; fill: #dbd5c5; text-transform: uppercase;
}
.m-type-offset-shadow { color: #dbd5c5; text-align: center; font-family: 'Graduate', sans-serif; text-transform: uppercase; font-size: 9em; letter-spacing: 0.1em; text-shadow: -2px -2px 0 #333, 2px -2px 0 #333, -2px 2px 0 #333, 2px 2px 0 #333, 0.04em 0.025em #333, 0.07em 0.055em #6a7d9d;
}

Typography SVG experiment - Script Codes JS Codes

//as you can see by this demo
//webkit and IE browsers curve the type to the path
//firefox treats it like there is no curve and more like a straight line
//i also found that Firefox seems to pick certain points at which it gets jaggy, will add more demos to show.
//if you use a perfect circle, firefox will get jaggy at different offset amounts
Typography SVG experiment - Script Codes
Typography SVG experiment - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3.5
Size 3,472 Kb
Views 48,576
Do you need developer help for Typography SVG experiment?

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 Wright (chriswrightdesign) Script Codes
Name
IPhone SVG
SVG Noise
Macbook Air SVG
SVG Noise blended radial
Grid - More complex grids with span
SVG Shadows
CSS line-height animated accordion pattern
Form adaptation
CSS Responsive animated Accordion
Grid - Auto-fit demo
Create amazing love letters 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!