CSS (Cascading Style Sheets) — каскадные таблицы стилей.
CSS — это язык представления внешнего вида документа, написанного с использованием языка разметки.

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 стрелка в кривых.
Александр
 
Сообщения: 321
Зарегистрирован: 20 мар 2014, 17:05

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;
  }
Создание сайтов
 
Сообщения: 8
Зарегистрирован: 31 июл 2017, 16:05

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 «стрелка» (анимация) с использованием кубических кривых Безье.
Александр
 
Сообщения: 321
Зарегистрирован: 20 мар 2014, 17:05


Вернуться в CSS