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!
Try the following tutorial, I thought it was very good:
1 Like
I don’t know much, but I can extract code reasonably .
<!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
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
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
No problem, you’re very welcome.
1 Like
system
Closed
June 28, 2021, 3:00am
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.