SVG simple arrow path
Добавлено:
03 сен 2019, 22:32
Александр
Small snippet for SVG arrow with quadratic Bezier curve:
- Код: Выделить всё
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 q 0 0 20 0 q 0 0 0 -40 q 0 0 16 0 q 0 0 -26 -20 q 0 0 -26 20 q 0 0 16 0 z" stroke="black" fill="transparent"/>
</svg>
- Код: Выделить всё
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 q -2 2 20 0 q 2 2 0 -40 q -2 -2 16 0 q 2 0 -25 -20 q -2 -2 -25 20 q 2 -2 16 0 z" stroke="black" fill="transparent"/>
</svg>
SVG стрелка в кривых.
Re: SVG simple arrow path
Добавлено:
05 сен 2019, 21:52
Создание сайтов
Animated SVG arrow! Just with CSS!
- Код: Выделить всё
<svg width="150" height="170" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="gradient2">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
</defs>
<path d="M 30 160 q 0 0 30 0 q 0 0 0 -50 q 0 0 20 0 q 0 0 -35 -40 q 0 0 -35 40 q 0 0 20 0 z" stroke-linejoin="round" id="arrow" />
</svg>
CSS:
- Код: Выделить всё
/*
#gradient1 .stop1 { stop-color: #fa3; }
#gradient1 .stop2 { stop-color: #fe0; }
#gradient1 .stop3 { stop-color: #f90; }
#gradient2 .stop1 { stop-color: #f70; }
#gradient2 .stop2 { stop-color: #fb0; }
#gradient2 .stop3 { stop-color: #f60; }
#arrow {
stroke-width:2;
fill: red;
transition-property: fill, stroke-width;
transition-duration: 1s;
}
#arrow:hover { fill: url(#gradient2); }
#arrow:hover { fill: #fa0; stroke-width:4;}
*/
#arrow {
stroke-width:4;
stroke:#fda;
fill: #fc8;
transition-property: transform, stroke, fill;
transition-duration: 0.32s;
}
#arrow:hover {transform: translate(8px, -74px) scale(0.8, 1.3);
fill: #fa0; stroke:#fdd;
}
Re: SVG simple arrow path
Добавлено:
19 окт 2019, 17:01
Александр
More sapid svg design and animation (I used for bottom the
cubic Bezier curve):
SVG- Код: Выделить всё
<svg width="150" height="170" xmlns="http://www.w3.org/2000/svg">
<path d="M 30 156 c 0 15 24 15 24 0 q 0 0 0 -50 q 0 0 20 0 q 0 0 -32 -40 q 0 0 -32 40 q 0 0 20 0 z" stroke-linejoin="round" id="arrow" />
</svg>
CSS- Код: Выделить всё
#arrow {
stroke-width:4;
stroke:#fda;
fill: #fc8;
transition-property: transform, stroke, stroke-width, fill;
transition-duration: 0.32s;
}
#arrow:hover {transform: translate(4px, -94px) scale(0.9, 1.5);
fill: #fa0; stroke:#fee; stroke-width:2px;
}
SVG «стрелка» (анимация) с использованием кубических кривых Безье.
Re: SVG simple arrow path
Добавлено:
27 ноя 2020, 18:04
Александр
Т. к. SVG темы разрастаются, будет создан отдельный подфорум по Scalable Vector Graphics (SVG)!