Cloche icon
New Added in v0.6.0
A free pencil-style cloche icon, drawn by code from 1 arc, 2 lines and 1 circle. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use cloche
One package, four ways in. The icon inherits currentColor and is decorative unless you give it a title. Install it with npm i @matita/icons.
React
import { Cloche } from '@matita/icons/react';
<Cloche size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="cloche" />JavaScript
import { Cloche, toSvg } from '@matita/icons';
toSvg(Cloche, { size: 24 }); // SVG stringSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" overflow="visible" class="sketch-icon sketch-icon-cloche" data-sketch="" aria-hidden="true"><path d="M3.46 15.75C3.55 15.17 3.62 13.36 4.01 12.29C4.4 11.22 5.03 10.14 5.8 9.32C6.57 8.5 7.6 7.81 8.64 7.35C9.67 6.9 10.87 6.59 12 6.57C13.13 6.55 14.39 6.78 15.42 7.24C16.44 7.7 17.41 8.51 18.17 9.35C18.93 10.19 19.62 11.22 19.99 12.29C20.36 13.35 20.34 15.16 20.41 15.74" stroke-width="1.6"/><path d="M2.97 14.98Q11.96 15.61 20.94 15.08" stroke-width="1.472"/><path d="M2.2 19.17Q12.09 18.94 21.99 19.17" stroke-width="1.792"/><path d="M11.48 3.82C11.57 3.79 11.82 3.69 11.99 3.67C12.17 3.65 12.37 3.66 12.55 3.72C12.73 3.77 12.91 3.88 13.05 4.01C13.19 4.14 13.31 4.32 13.4 4.5C13.48 4.68 13.54 4.9 13.55 5.11C13.56 5.32 13.54 5.56 13.46 5.76C13.37 5.96 13.22 6.16 13.05 6.3C12.88 6.45 12.67 6.56 12.45 6.64C12.23 6.71 11.98 6.78 11.75 6.76C11.52 6.75 11.27 6.66 11.06 6.54C10.84 6.42 10.63 6.26 10.48 6.06C10.32 5.87 10.18 5.63 10.12 5.38C10.05 5.13 10.03 4.84 10.07 4.58C10.11 4.32 10.21 4.04 10.36 3.81C10.51 3.59 10.72 3.38 10.95 3.22C11.18 3.07 11.45 2.93 11.73 2.87C12.01 2.81 12.47 2.88 12.62 2.88" stroke-width="1.536"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Cloche } from '@matita/icons/react';
<Cloche size={32} pencil />The file is icons/cloche.svg in the package (pencil/cloche.svg for the pencil variant). Matita 0.6.0.
02How it's drawn
The recipe for cloche
Cloche is not stored as a drawing. It is a recipe of 1 arc, 2 lines and 1 circle on a 24 by 24 grid, and a small program draws it like a pencil would. The wobble comes from the name, so it always comes out the same.
A 12 15 8.5 180 360;
L 3.5 15 20.5 15;
L 2.5 19 21.5 19;
C 12 5 1.3cloche as a number: 423423443
Shapes: L line, P polyline, Z closed shape, R rectangle, C circle, E ellipse, A arc, Q curve, O dot. Separate shapes with ;. Edits stay on this page.
03Takes, sizes, pencil
Same icon, every way
Pass a seed for another take of the same recipe. The wobble is capped, so it still reads at 16 px.
Five seeds of cloche. Seed 0 is the default.
cloche from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/cloche.svg.
True pixel sizes.