Alphabet letters in svg

HTML & CSS
1

Hello!

I am trying to create some letters in svg format and place them in an existing svg image.

Basically I like the logo of a website because it is having a great animation, and want to create the same effect with different letters.
Instead of L | S, I want to create it with H | V.

I am trying to create it, using a program that I have find, but it is very confusing.
this is the program: https://yqnn.github.io/svg-path-editor/

But maybe there is a more easy way to make it?

If someone knows anything, I would appreciate it!

2

Try the following tutorial, I thought it was very good:

1 Like
3

I don’t know much, but I can extract code reasonably . :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f9f6ed;
    font: normal 1em / 1.5em sans-serif;
 } 

svg:hover path,svg:hover rect{
	stroke-dasharray:1000;
	stroke-dashoffset:1000;
	-webkit-animation:dash 12s linear forwards;
	animation:dash 12s linear forwards;
 }

@-webkit-keyframes dash{
   to { stroke-dashoffset: 0;}
 }

@keyframes dash{
   to { stroke-dashoffset: 0; }
 }

svg:hover rect{
	-webkit-animation:dash 5s linear forwards;
	animation:dash 5s linear forwards;
 }
</style>

</head>
<body>

<svg 
 xmlns="http://www.w3.org/2000/svg" 
 viewBox="0 0 50 50"
 width="50px" height="50px">

<g>
 <rect x="0.5" y="0.5" width="49" height="49"
 stroke="#53565b" stroke-width="1" fill="transparent"/>

 <path d="M25.1344086,9.40860215 L25.1344086,40.7258065" 
  stroke="#53565B" stroke-width="1" stroke-linecap="square"/>

 <text x="7"  y="30" fill="#53565B">H</text>
  <text x="33" y="30" fill="#53565B">V</text>
</g>

</svg>

</body>
</html>

coothead

2 Likes
4

I prefer to not use the SVG fixed dimensions and to only rely on ViewBox(…) parameters so the SVG expands to fill the parent container. Ideal for responsive web pages:

<div style="width: 42%; margin: 0.42em 0; border: dotted 11px red;">
  <svg 
   xmlns="http://www.w3.org/2000/svg" 
   viewBox="0 0 50 50"
   >
  <g>
   <rect x="0.5" y="0.5" width="49" height="49"
   stroke="#53565b" stroke-width="1" fill="transparent"/>

   <path d="M25.1344086,9.40860215 L25.1344086,40.7258065" 
    stroke="#53565B" stroke-width="1" stroke-linecap="square"/>

   <text x="7"  y="30" fill="#53565B">H</text>
    <text x="33" y="30" fill="#53565B">V</text>
  </g>
  </svg>
</div>
1 Like
5

Thank you both!

Yes these seems to work, I am not familiar with svg paths etc, it seems less complicated than I thought.

1 Like
6

No problem, you’re very welcome. :winky:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.