i need to help for design a shape for footer in project similar to this image. please help me.
How is designing shape similar to waves with html and css. with border-radius is possible or with SVG?
Is it possible to be responsive?
my svg code:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100%" height="200px" viewBox="0 0 1366 432"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,432.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1710 l0 -1710 10000 0 10000 0 0 114 0 113 -127 100 c-833 653
-1848 1155 -2883 1427 -681 179 -1808 322 -3055 388 -328 18 -1972 18 -2340 0
-1091 -51 -1781 -111 -3645 -317 -1898 -209 -2407 -249 -3230 -249 -682 -1
-1004 26 -1490 125 -1101 225 -2207 812 -2996 1590 l-131 129 -51 0 -52 0 0
-1710z"/>
</g>
</svg>
but it not fullwith. try it
Update your SVG file. Change:
preserveAspectRatio="xMidYMid meet"
to
preserveAspectRatio="none"
Likely tricky to pull that off with pure css. I would try using a CSS shape builder tool online if you truly want to use CSS.
Make this will help? http://html-generator.weebly.com/css-shape-generator.html#y
Related
I am trying to add a text inside svg path i copy from figma.
Here is how it's look in figma:
Here is my code base:
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<text>hello</text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
</svg>
The main thing is to swap the order of the path and text elements so the text element is drawn on top of the path. After that you just need to position the text where you want it and ensure it has a fill colour so you can see it.
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
<text y="43" x="61" fill="white">hello</text>
</svg>
Currently I'm trying to load in my custom svg component inside an image tag. But for some reason I am unable to see the svg image which is inside a map component. My custom SVG file is like so where I am loading another image inside the SVG:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
<clipPath id="clip">
<path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
-284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
</clipPath>
<image x="-200" y="30" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
<use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
</svg>
And my image tag is like so:
<img src="icon.svg"/>
But when I go to check the network tab this is what it shows:
CodeSandBox: https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-6rupe?file=/src/App.js
To be honest I'm not sure if there's an issue with external/cross-domain image resources in codesandbox (could also be an issue developing locally). The duplicate Robert tagged leads me to believe the issue is with this specific SVG asset itself.
But there is still a way to render it.
Import the svg image as a ReactComponent and render it instead of the img tag.
Source
import { ReactComponent as Icon} from "./icon.svg";
...
<Icon
style={{
width: 48,
height: 48
}}
onMouseEnter={() => {
setSelectedProperty(item);
setIsPopupShown(true);
}}
onMouseOut={() => {
setSelectedProperty(null);
setIsPopupShown(false);
}}
/>
I am simply trying to render the svg on the page however it is not loading.
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linejoin="round" stroke-miterlimit="2">
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path
d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z"
fill="#404040" />
</g>
</g>
</svg>
This is my SVG from my HTML, on the webpage it is loaded.
However it doesn't render to the page.
I should add I also have a width and height on the svg of 25px.
Maybe there is something on top the icon. Try with
svg {
width: 25px;
z-index: 200;
}
<clipPath id="b">
<path d="M712 0h39.1v23.6H712z"/>
</clipPath>
<g clip-path="url(#b)">
Id's for all components were the same. Ids need to be unique. Must have been a setting in Affinity Designer.
I hate weird Matrix conversions.
Your SVG is a soccerball, and I presume all that mumbo jumbo is to make it look round? It is not round!
I multiplied the path by 10 with: https://yqnn.github.io/svg-path-editor/
Made it a Relative path so positioning is all done with the first M225 444
adjusted viewBox
removed SVG mumbo jumbo
added <circle> for reference
Took some minutes to adjust to scale(1.08, 1.333) and position with M225 444
re-adjusted viewBox
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<circle cx='50%' cy='50%' r='50%' fill='red'></circle>
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z" fill="#404040" />
</g>
</g>
</svg>
<!-- My Version: -->
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<circle cx='50%' cy='50%' r='50%' fill='green'></circle>
<path transform="scale(1.08, 1.333)" fill='#404040' d='M225 444v-58l63-30l63 30v55a338 338 90 01-126 3zm-125-65a421 421 90 00110 53v10a334 334 90 01-125-57l15-7zm378 3a296 296 90 01-118 56v-53l62-30l55 26zm-260-121l63 29v58l-63 30l-63-30v-58l63-30zm-204 27l60-27l63 29v58l-61 28c-29-25-50-54-62-88zm532-3a214 214 90 01-60 89l-55-26v-58l63-30l52 25zm-123-120l62 30v58l-62 29l-63-30v-58l63-30zm-135 0l63 30v58l-63 29l-62-30v-58l62-30zm-275 0l61 30v58l-63 29a182 182 90 012-116zm522 104c5-17 6-30 6-46c0-17-6-34-10-45l15-7a171 171 90 012 105l-13-7zm-318-200l63 29v58l-63 30l-63-30v-58l63-30zm-138 2l58 27v58l-63 30l-59-28a220 220 90 0164-87zm404 3c28 25 50 54 62 87l-51 24l-63-29v-58l52-24zm-123-62c43 10 82 30 114 54l-51 24l-63-30v-48zm-134-6a347 347 90 01125 4v50l-63 30l-62-30v-54zm-12 15c-23 5-46 12-61 20c-16 6-40 21-51 30l-14-6a301 301 90 01126-57v13z' />
</svg>
<style>
svg {
background: pink;
width:180px;
}
</style>
I have a weird issue. I a musing a sprite for all my SVGs. They all work just fine, and even the one in issue works fine when I run my code locally.
But when I deploy it (firebase), one of the SVGs just doesn't show up. What could be the reason?
Here's the code for two of the SVGs. smile is the one that gives me issues, the other one doesn't.
<symbol id="create" viewBox="0 0 24 24">
<title>create</title>
<path d="M11 6.999c2.395.731 4.27 2.607 4.999 5.001.733-2.395 2.608-4.269 5.001-5-2.393-.731-4.268-2.605-5.001-5-.729 2.394-2.604 4.268-4.999 4.999zm7 7c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm-6 5.501c1.198.365 2.135 1.303 2.499 2.5.366-1.198 1.304-2.135 2.501-2.5-1.197-.366-2.134-1.302-2.501-2.5-.364 1.197-1.301 2.134-2.499 2.5zm-6.001-12.5c-.875 2.873-3.128 5.125-5.999 6.001 2.876.88 5.124 3.128 6.004 6.004.875-2.874 3.128-5.124 5.996-6.004-2.868-.874-5.121-3.127-6.001-6.001z"/>
</symbol>
<symbol id="smile" viewBox="0 0 24 24">
<title>smile</title>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
</symbol>
They are both wrapped between these two together with all the other symbols
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
.....svgs......
</defs>
</svg>
You can resolve this by changing the <symbol> tag to one of <svg>.
I'm looking through the W3C documentation but I can't find the <symbol> tag, probably you or "firebase" are using some API or something to adjust the code, try something like this:
<svg id="smile" viewBox="0 0 24 24">
<title>smile</title>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
</svg>
You may be using an API that I think is also practical, which is the fontAwesome API, it is simple to move and fits well with the text.
I can't understand this SVG path code. Normally SVG path code is not like this. This code draws letters "The Verge". I want to draw some other stuff by doing the same method. By I can't understand the code, I tried many different things but could not draw the letters, I want to draw by applying the same code method as mentioned below.
Below is the code
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewbox="0 291.4 1280 217.2">
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8 363.6c0-45.6-33.7-71.5-81.5-71.5h-74.7v211.2h67.1v-54.1l38.4 54.1h75.7l-54.4-81c19.6-10.7 29.4-30.2 29.4-58.7M865.5 387v-39.3c9.3 0 20.7 2.8 24.1 13 .3.9.5 1.9.8 2.9 0 .1 0 .3.1.4.1 1 .3 2.2.3 3.4 0 15.7-14.3 19.6-25.3 19.6M559.2 420.8h-.6l-4.8-17.4-15-53.1h26.4l17.4-58.2h-134l76.8 211.2h68.8l8.3-22.6s36.8-99.8 56.9-154.2v176.8h124.3v-58.2h-60.2v-24.6h38.2v-48.1h-38.2v-22.2h60.2V292H598l-38.8 128.8zM1280 350.3v-58.1h-124.3v211.2H1280v-58.2h-60.3v-24.6h38.3v-48h-38.3v-22.3">
</path>
<path d="M1142.8 459.1V373H1048v48h35.3v17.1c-2.7 2.4-8.5 3.7-14.5 3.7-24.6 0-42.8-19.4-42.8-43.1s17.7-44.7 42.3-44.7c14.9 0 50.2.1 50.2.1v-62.6h-16.1c-30 0-59.9-2.4-87.4 11.8-21.7 11.2-38.9 30.2-48 52.8-5.3 13.3-8 27.7-8 42 0 59.9 47 110.4 107.9 110.4 30.2 0 59.7-11.3 75.8-25.4.1-14.6.1-16.8.1-24">
</path>
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8">
</path>
</svg>