Curved type with SVG

Developer
Peter Hrynkow
Size
2,922 Kb
Views
44,528
  1. Curved type with SVG Previews
  2. Curved type with SVG HTML Codes
  3. Curved type with SVG CSS Codes
  4. Curved type with SVG JS Codes

How do I make an curved type with svg?

I’m planning to create an SVG branch for CircleType.js – Here is a little experiement.. What is a curved type with svg? How do you make a curved type with svg? This script and codes were developed by Peter Hrynkow on 14 September 2022, Wednesday.

Curved type with SVG Previews
IQ Test

Curved type with SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Curved type with SVG</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
.demo { font-family: Bitter; text-transform: uppercase; font-size: 40px; float: left; background: white; margin: 20px;
}
#demo1 { float: none; width: auto; height: 700px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<div class="demo" id="demo1">Here is some text that fits inside its container</div>
<div class="demo" id="demo2">Here is some curved text going clockwise.</div>
<div class="demo" id="demo3">Here is some curved text going counter-clockwise.</div>
<br style="clear: left" /> <script src="js/index.js"></script>
</body>
</html>

Curved type with SVG - Script Codes CSS Codes

* { box-sizing: border-box;
}
.demo { font-family: Bitter; text-transform: uppercase; font-size: 40px; float: left; background: white; margin: 20px;
}
#demo1 { float: none; width: auto; height: 700px;
}

Curved type with SVG - Script Codes JS Codes

function CircleType (target, options) { function generateUUID(){ var d = new Date().getTime(), uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) { var r = (d + Math.random()*16)%16 | 0; d = Math.floor(d/16); return (c=='x' ? r : (r&0x7|0x8)).toString(16); }); return uuid; }; function setup (target, options) { var uuid = 'CircleType_' + generateUUID(), text = target.innerHTML, yOffset = parseInt(window.getComputedStyle(target).lineHeight, 10) / 2, r = options.radius, d = r * 2, dir = options.dir === -1 ? '0' : '1', d2 = d + (yOffset * 2), w = options.fitText ? '100%' : d2, h = w, tags = '<svg xmlns="http://www.w3.org/2000/svg" \ width="' + w + '" height="' + h + '" viewBox="0 0 ' + d2 + ' ' + d2 + '" \ version="1.1" preserveAspectRatio="xMidYMid meet">\ <defs>\ <path id="' + uuid + '" \ d=" \ M ' + yOffset + ', ' + (r + yOffset) + ' \ a ' + r + ',' + r + ' 0 1,' + dir + ' ' + d + ',0 \ a ' + r + ',' + r + ' 0 1,' + dir + ' -' + d + ',0 \ a ' + r + ',' + r + ' 0 1,' + dir + ' ' + d + ',0 \ a ' + r + ',' + r + ' 0 1,' + dir + ' -' + d + ',0 \ "/> \ </defs> \ <use xlink:href="#' + uuid + '" fill="none" /> \ <text text-anchor="middle"> \ <textPath startOffset="62.5%" xlink:href="#' + uuid + '" \ dominant-baseline="middle"> \ ' + text + ' \ </textPath> \ </text>\ </svg>'; target.innerHTML = tags; }; setup(target, options);
};	new CircleType(document.getElementById('demo1'), {radius: 180, dir: 1, fitText: true});	new CircleType(document.getElementById('demo2'), {radius: 190, dir: -1, fitText: false});	new CircleType(document.getElementById('demo3'), {radius: 190, dir: 1, fitText: false});
Curved type with SVG - Script Codes
Curved type with SVG - Script Codes
Home Page Home
Developer Peter Hrynkow
Username peterhry
Uploaded September 14, 2022
Rating 3
Size 2,922 Kb
Views 44,528
Do you need developer help for Curved type with SVG?

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!

Peter Hrynkow (peterhry) Script Codes
Name
3D Axis Data Visualizer Thingy
T-Shape Visualization
CSS Animation seeking with JavaScript
Hardward Accelerate Mask Reveal
CSS Button with Angled Sides
CSS Starbursts
CircleType
Kris Kross Hamburger
Holographic Projection
Cross-browser vertical centering without Javascript and almost no CSS.
Create amazing blog posts 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!